Info box appearing offscreen after editing info_template

[cngarrison]

I added another line to the wallpanel-screensaver-info box via info_template. The change makes the info box about 25% taller. The bottom of the info box will sometimes be off the bottom of the screen, when it's positioned randomly.

[Shreyas-R]

In this case, you have to adjust the info box style to support the additional height. Although info box is having hardcoded style, it can be customized which is mentioned in the doc. Since it is hardcoded, the default style config parameter doesn't include wallpanel-screensaver-info-box style details in the doc. I'll update the documentation to cover this.

Meanwhile, here is the default style of wallpanel-screensaver-info-box HTML element which you can tweak to support additional height. You can adjust height: '50%' based on info box content height for a quick fix.

wallpanel_screensaver:
  ...
  ...
  style:
    ...
    ...
    wallpanel-screensaver-info-box:
      margin: '5vh auto auto 5vh'
      padding: '0 0 0 0'
      width: '50%'
      height: '50%'
      fontSize: '8vh'
      fontWeight: 600
      color: '#ffffff'
      text-shadow: '-2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, 2px 2px 0 #000000'

[cngarrison]

@Shreyas-R I did check docs but couldn't see it. 😉

That style snippet is what I need, thanks for that.

[cngarrison]

I tried changing the height, both as % and px value. The info box continues (randomly) to be placed off bottom of the screen.

...
    wallpanel-screensaver-info-box:
      margin: 5vh auto auto 5vh
      padding: 0 0 0 0
      width: 50%
      height: 540px
      fontSize: 8vh
      fontWeight: 600
      color: '#ffffff'
      text-shadow: '-2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, 2px 2px 0 #000000'

Using browser inspector confirms updated height is being used.

Any other suggestions?

Thanks, 
Charlie

[Vitani]

Similarly, if you have a vertically-oriented dashboard, the text often goes off the right-hand side of the display.

[Vitani]

I believe the culprit is https://github.com/Shreyas-R/lovelace-wallpanel-screensaver/blob/main/dist/wallpanel-screensaver.js#L1088 not taking in to account the size of the info box, and assuming that the width & height are both 50%

[cngarrison]

I believe the culprit is https://github.com/Shreyas-R/lovelace-wallpanel-screensaver/blob/main/dist/wallpanel-screensaver.js#L1088 not taking in to account the size of the info box, and assuming that the width & height are both 50%

Seems a reasonable conclusion to me; would explain why setting height of info-box didn't fix it for me. I'll do some testing.

[cngarrison]

I know a PR would be better, but I don't have time to create one today. This change for the height seems to be working (so far). The same change probably needs to happen for width (for vertical dashboards).

		const allowedMaxHeight = window.innerHeight -
			(infoBox.style.height.includes('%') ? 
				parseInt(infoBox.style.height) * window.innerHeight : 
				parseInt(infoBox.style.height)
			);

I haven't tested the height set as % either, I'm using a px height for info-box.

[Vansmak]

I know a PR would be better, but I don't have time to create one today. This change for the height seems to be working (so far). The same change probably needs to happen for width (for vertical dashboards).

		const allowedMaxHeight = window.innerHeight -
			(infoBox.style.height.includes('%') ? 
				parseInt(infoBox.style.height) * window.innerHeight : 
				parseInt(infoBox.style.height)
			);

I haven't tested the height set as % either, I'm using a px height for info-box.

hello where exactly do you put this code? ty

[Vansmak]

is there a setting to make the info static? not moving around?

[cngarrison]

I know a PR would be better, but I don't have time to create one today. This change for the height seems to be working (so far). The same change probably needs to happen for width (for vertical dashboards).

		const allowedMaxHeight = window.innerHeight -
			(infoBox.style.height.includes('%') ? 
				parseInt(infoBox.style.height) * window.innerHeight : 
				parseInt(infoBox.style.height)
			);

I haven't tested the height set as % either, I'm using a px height for info-box.

hello where exactly do you put this code? ty

See the comment from @Vitani for location of code - I deleted one line and added the code above at:

https://github.com/Shreyas-R/lovelace-wallpanel-screensaver/blob/main/dist/wallpanel-screensaver.js#L1089

[cngarrison]

is there a setting to make the info static? not moving around?

That question is not really relevant to this GH issue, you may want to ask elsewhere. I would try setting width and height to 100%.

[Vansmak]

I know but figured a work around by setting the time it moves to like 8 hours so now it's stationary.

as far as the codes I did see the earlier posts under style section but this code is very different so not sure.

[cngarrison]

I know but figured a work around by setting the time it moves to like 8 hours so now it's stationary.

That should work too.

as far as the codes I did see the earlier posts under style section but this code is very different so not sure.

It may be worth waiting until there is a new release with a fix if you're not comfortable with JavaScript.

[cngarrison]

Quick update:

I have changed the height to auto for wallpanel-screensaver-info-box, and with the change above it works as expected.

I had the height set to px value but I couldn't find the right value for one of the wallpanels - changing to auto fixed, the info box is always fully on screen now.