iframe no scrolling

[Chris12]

yes, you can

First add a key to the block definition to be able to identify the frame:

Code: Select all

frames.buienradar = {
  frameurl:"https://gadgets.buienradar.nl/gadget/zoommap/?lat=50.82535&lng=5.72597&overname=2&zoom=8&naam=6228CN&size=2b&voor=0",
  height: 360,     //height of the block in pixels
  width: 10,
  scrollbars: false,
  refreshiframe:60000,
  forcerefresh: 2,
  key: 'test'
}

Then add the following to custom.css to set the width of the iframe:

Code: Select all

div[data-id='frames.test'] iframe {
    width: 325px !important
}

Hi, while searching the board for a sollution I came across this post. I do have the same issue, the buienradar shows a white bar at the right side.
When selecting width:10 there's no white bar anymore, but then the buienradar overview does not fit equally to the rest of the dash.
I tried you solution but the iframe seems not to respond to it, it will not get wider or smaller.
Also tried a different size (300x300) via the buienradar gadget, but then to much of the overview is cut-off (but the white bar is gone).

Using beta 3.5.2, has anything changed for this version?

my code: (snippet)

config.js

Code: Select all

var frames = {}
frames.buienradar = { 
frameurl:"https://gadgets.buienradar.nl/gadget/zoommap/?lat=52.09083&lng=5.12222&overname=2&zoom=8&naam=utrecht&size=2&voor=1",
refreshiframe: 60000,
width: 12,
height: 185,
scrollbars: false,
forcerefresh: 1,
key: 'test'
}
}

custom.css

Code: Select all

/* Buienradar */
div[data-id='frames.test'] iframe {
    width: 300px !important
}

[Lokonli]

I removed the 'frames.' part from the data-id. So the following in custom.css should work:

Code: Select all

/* Buienradar */
div[data-id='test'] iframe {
    width: 300px !important
}

[Chris12]

OK, the white bar is now gone. But the buienradar map picture is not streched to the 300px value.
And when I look at my dash with a zoomed out browser the white bar is showing again.

Another iframe I use does not have this issue, that simply follows the browsers screen size.

Code: Select all

frames.flightradar = {
frameurl:"https://www.flightradar24.com/simple?lat=52.0&lon=04.9",
width: 12,
height: 200,
scrollbars: false,
forcerefresh: 1,
refreshiframe: 60000
}

[Lokonli]

I can't control the content of an iframe.

For buienradar I would recommend to get a GIF image and show it with a button:

Code: Select all

buttons.buienradar = {
    key: 'buienradar',
    width: 12,
    refresh: 60,
    btnimage: 'https://image.buienradar.nl/2.0/image/animation/RadarMapRainNL?height=300&width=360&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=3&forecast=6&skip=1',
    url: 'https://www.buienalarm.nl/venlo-limburg-nederland/51.36234,6.18802',
    forcerefresh: 2,
}

[Chris12]

Yes that works fine, and give a nice clean pop-up website with more detail/forecast. Thanks for the help!