Background images in PWS-dashboard

I remember posting about this a long time ago, but I can’t find it. . . I recently tried using a background image again:

Why do the scroll bars (if present) disappear when you open a popup, so the image moves down and to the right?

I’ll put the image back so you can see what I mean. . .

It depends on the browser and the device.
Some “superimpose” the scrollbars on top of the back-ground image.
Then the image will not move. F.i. with an iPad

Others draw the scrollbars at the right next to the background image.
Then when a “smaller” pop-up is drawn, the current html is covered with a new layer and the main background becomes “inactive”, the main scrolll bars are not drawn and the main background image grows to fill the whole area.

Maybe some html expert can find a solution for that.

Wim

To quote Galileo, “eppur si muove” in Edge, Chrome and Firefox on my PC. Haven’t checked my wife’s iPad. . .

I hope so. . .

Many thanks, Wim, as always :grinning:

I just did.

The background image doesn’t move on a iPad because the display is only 3 blocks wide by 5 lines deep, and there is no need for a horizontal scroll bar. And the vertical scroll bar is minimal in size.

On PC my page is 4+4+4+3 blocks, with huge scroll bars. . .

The display of blocks is dynamic and adepts itself to the window width.

There should be only vertical scroll bars Horizontal ones should never occur.
Also for 4 wide X 4 high.
But I seem to have miscalculated a few pixels on PWS_index2.php lines 268-300

Will test tomorrow.

Thanks for finding this.

Wim

To get rid of that:
css/featherlight.css lines 9 - 12 now read

html.with-featherlight {
	/* disable global scrolling when featherlights are visible  */
	overflow: hidden; 
}

change that to

html.with-featherlight {
	/* disable global scrolling when featherlights are visible 
	overflow: hidden; */
}

To get it active one needs to do “inspect” and “force reload” to reload the changed .css script



To get rid of the horizontal scroll bar if you physical screen is wider than 1280px
→ just enlarge the window

If physical screen is exactly 1280px wide there is really no decent solution as that is the exact wide of 4 blocks wide + normal overhead
Solution 1: Switch to 3 blocks wide if the window is less than 1290px would mean only 3 blocks wide display
→ IMHO unacceptable
Solution 2: Make every block and all containers a few pixels smaller but that would result in new formatting problems in some blocks.
→ a lot of tweaking
Need to test first.

Wim

That works well :grinning:

I can live with the scroll bars now the background image doesn’t leap around. . .