Border Thickness varying across systems.

[Shrija]

Hi,

My problem is that the border thickness keeps varying across systems I see in the app. I have set the thickness of the label in my Gallery to be 0.9. The screen I see on my laptop is : 

While I view the published app on my monitor(larger than the laptop screen) it is :

The same screen when viewed on another laptop shows random thick lines in different columns.

The scale-to-fit setting needs to be on and the lock aspect ratio needs to be off in my case.

How to prevent the randomly thick borders from occurring?

Please help. Thanks

[trjackson77]

Hi @Shrija.  This could be a rendering issue.  But also it could be something as simple as you haven't published the changes in your app and/or the previously published app is still cached in the browser.

Is it worth checking this first?

Tim.

[Shrija]

Hi, @trjackson77! I am sure that the changes have been published and even after I refresh the app, the issue persists.

[Ethan_R]

Hi @Shrija ,

Do you see same issue when you reduce screen size?

I used to get similar issue of borders and later removed all borders and used spaces in between also kept padding 0 for all elements and the gallery which helped having uneven borders.

I feel its how the content is displayed on browser with respect to screen size.

[Shrija]

Hi, @Ethan_R!

When I reduce the screen size the gaps between each row and column increase.  It looks like this : 

I even tried keeping the padding as 0 but didn't work out.

[Ethan_R]

`Hi @Shrija ,

The control's border enhances its apparent size, as it extends beyond the control's width. For instance, if the control width is set to 20 and a border of 2 is applied, the overall control width becomes Width + (2 * border width) = 24. It's crucial to account for this in app calculations to prevent element overlap and distortion of borders across various screen sizes.

Additionally, screen size and aspect ratio play a role when using borders. Controls placed closely together may exhibit overlapping or joint border frames, resulting in a bold border appearance similar to your screenshot. To enhance visual aesthetics, I recommend using borderless controls with slight gaps between elements. You can also introduce a subtle difference in background tint to distinguish between controls.

Hope this helps