Can I specify a part of a page to display in an iframe?

Configuration
1

Hi,

I want to be able to specify a part of a webpage. Is this possible?

I’ve found hte following code, but not sure if this works in Hass.IO or how to implement it:

<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
<iframe scrolling="no" src="http://tools.dimpost.com/proxy-server.html" style="border: 0px none; margin-left: -36px; height: 812px; margin-top: -486px; width: 650px;">
</iframe>
</div>

Thanks!

2

No one has any knowledge on this? I’ve also tried practicing adding CSS elements to cards with no go. I have the card-mod CSS.

I used:

type: entities
style: |
  ha-card {
    color: red;
  }
entities:
  - entity: sensor.u_s_air_quality_index_2
  - entity: sensor.u_s_air_pollution_level_2
  - entity: sensor.u_s_main_pollutant_2
title: AirVisual - Everton Park

Got the error: Expected a value of type undefinedforstylebut received"ha-card {\n color: red;\n}\n".

Why am I getting that error and what does it even mean?

Thanks!

3

Did you ever figure out how to do this? I have a similar issue where I would like to display the live weather radar image from http://www.ilmateenistus.ee/ilm/ilmavaatlused/radaripildid/komposiitpilt/?lang=en in my weather dashboard. Displaying the whole website with iframe is quite easy, but there is a lot of clutter and only displaying the relevant part with CSS or other means would be much preferred.

Any help would be appreciated.

4

Not the best solution but works :slight_smile:

type: iframe
url: 'https://m.ilmateenistus.ee/m/radaripildid/'
aspect_ratio: 155%
title: KAUR radar

But it may not be of long term help as KAUR will release a new app- and embedding is some kind of mystery for them :frowning:
Best, JR

5 
          - type: 'custom:html-template-card'
            content: >
              <div style="position: absolute; height: 1000px; width: 400px; overflow: hidden;">
              <iframe
              src="https://m.programme-tv.net/programme/en-ce-moment.html"
              frameborder="0" allowfullscreen="true" allowtransparency="true" style="width: 100%; min-height:
              1000px; border: 0; margin-top: 0px; margin-bottom: 0px; position: absolute; top: -238px;"></iframe>
              </div>

little sample in case that can help some people for how skip some part of a iframe on ha.

scrolling="no"

is a nice option too.

2 Likes
6

Tried to implicate scrolling disable option but no luck so far.
Where I have to put this line scrolling=“no” ?

Edited: I get this no scrolling working for vertical scrolling but is the way to disable horizontal scrolling too?