Adding image background changes position of text box between App and Web display

[spanners601]

I've just noticed a few issues between APP display and WebGUI -
if I add a background image to an existing text box its position onscreen changes (this may relate to the size of the image file)
I also found that changing font size within a box had a similar effect. Text kerning or weighting will change with Text size between App and WebGUI. Word wrapping behave differently between App and WebGUI

[tomhillmeyer]

What version of Companion Dashboard are you running @spanners601? v1.3.1 had some fixes for this.

[harry-greenfield]

I am seeing the same behaviour in both v1.3.1 and your latest v1.3.2. A box with an image background appears in a completely different place in the app versus the WebGui.

[tomhillmeyer]

Hmmmm....I'm unable to recreate this at all. Adding/changing/removing a box background doesn't do anything with box size/position on the web display. I'm stumped, even combinations with/without headers I'm not seeing this.

I'm running Dashboard v1.3.2 on macOS Apple Silicon. Are you able to provide what OS you're on, and if there's any additional steps to recreate this? A screen recording would be amazing if you're able to!

[spanners601]

It seems to be to do with the size of objects inside a box. Ie. Text to large within a box then offsets its position. Also seeing it on images added to boxes that are larger than the box that its in
Ill try and work out exactly and get some examples over the next few days

[tomhillmeyer]

Examples would be great. I'm seeing when text is too large it clips/scrolls within the box without changing the size, which is the intended behavior.

Background images do have the option for cover or contain, but obviously shouldn't be changing the box size!

[spanners601]

Sorry I didn't mean it changed the box size. Im seeing its relative position on the web browser change in relation to the internal box image being larger. From memory build a few box layouts and line them up onscreen in the app and watch the position on the Web browser change as you add a larger graphic into one of the lower boxes. Ill get you some examples and a more accurate description to lead you to the solution

[tomhillmeyer]

How are you adding the graphic? Is it the "background image" and are you browsing for the image or using a URL/Companion Variable?

Or is this added using markdown? A screenshot of the settings page where you're adding these images would be very helpful.

[spanners601]

Adding a background to the Clock window

it then move the clock window to behind one of the other logos ( I had to move the logo out of the way to show you as they are a similar size and it was hidden)