topic Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100% in ArcGIS Experience Builder Questions

Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

BrandonMcAlister — Tue, 11 Jul 2023 16:32:16 GMT

Hey everyone, the issue I am having is my text and buttons that I have added to the header do not scale with different resolutions on different monitors and laptops. When I say resolutions I am referring to the Scale and layout settings under display settings on Windows. See below:

On my laptop screen the scale and layout setting is at 125% and when I view my published experience this happens.

However if I set my scale back to 100% it will display correctly, I have a widget controller as well with three widgets and it only displays two on 125%.

Is there a configuration step I am missing?

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

JamesShreeve — Thu, 13 Jul 2023 10:53:09 GMT

I have noticed the same problem with a few of my EB apps but am yet to find a way to resolve it, or if it's even possible? If anyone has found a config step or something that allows for the text etc. to scale according to the display setting it'd be great to know!

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

BrandonMcAlister — Thu, 13 Jul 2023 16:05:18 GMT

I am at the ESRI UC conference in San Diego and the guys at the booth recommended using a row they can be found under the layout section of the widget pane. I tested it with the guys here and it appears to scale properly when they are housed within a row. I haven't been able to test it on my systems yet, also its worth mentioning that most of my items are housed within the header.

However, I do believe that the rows are limited and you can only fit so many things inside them because there are a predetermined number cells within the row.

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

JamesShreeve — Tue, 18 Jul 2023 08:21:57 GMT

Hi Brandon, really appreciate you replying with further information and hope you are enjoying the UC. I will have to test out the row option and see whether it's feasible for our application - we've only got a title and a couple of logos so hopefully they can all be housed within the row.

Thanks,

James

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

BrandonMcAlister — Wed, 19 Jul 2023 13:43:34 GMT

Hey James, I tested it on my systems and found that the issue still persists even when the items are housed in a row.

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

JamesShreeve — Thu, 20 Jul 2023 07:56:47 GMT

Hi, agreed - I housed everything that was in my header originally into a row and saw no difference.

Thanks,

James

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

BrandonMcAlister — Fri, 21 Jul 2023 20:23:38 GMT

Hey James,

I did a work around today where I set the resolution the lowest setting for each view then developed the page for that setting. It looks a little wonky when you scale to bigger versions but at least it prevents the overlap.

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

Wei_Ying — Thu, 03 Aug 2023 23:18:53 GMT

Hi @BrandonMcAlister ,

Thanks for your feedback. From my understanding, you see overlaps of text and buttons in ExB when change the scree resolution, right?
Here are my suggestion:

Try to align the text widget and button widgets to the same side. I guess you are aligning the text to the left, while button to the right. They are using % unit for size and alignment. So when the resolution changes, their positions change as well. But since they are not aligned to the same side, they are not aligning in the same manner, so overlap can happen, and that's as expected. To avoid overlap, align them to the same side, make sure they use the same unit (say %) for alignment.

Thanks,

Wei

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

BrandonMcAlister — Mon, 07 Aug 2023 16:40:54 GMT

Hi Wei,

I have tried that and the buttons still overlap with text and when changing into different resolutions are no longer snapped to the edge. Also the text doesn't scale appropriately with different resolutions. Maybe I am misunderstanding how it works or is there a way to set the size of the text to scale to the size of the container?

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

Wei_Ying — Fri, 01 Sep 2023 02:19:40 GMT

Hi @BrandonMcAlister ,

The text font size is not scalable for responsiveness automatically. The overlap problem can be solved though. If you like, I am happy to have a meeting with you to take a look at your app config further. Please give me private message if you'd like to talk.

Thanks,

Wei

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

LindaStewart — Mon, 17 Jun 2024 15:10:11 GMT

Hi Wei

There isn't an option for buttons to have the text size be by %. You can only set via px.

This is in edit mode. you can see that the text can only be edited by px

This is what you see in view mode. if the browser is not at 100%, the size of the txt is not resizing to fit the button.

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

Wei_Ying — Wed, 19 Jun 2024 19:23:58 GMT

hi @LindaStewart ,

Thanks for sharing your feedback. I think that could be an enhancement.
cc. @TonghuiMing

Re: Text and buttons do not scale correctly on monitors with a Scale and layout that is not at 100%

Tiffany_Chau — Tue, 23 Jul 2024 15:35:00 GMT

Hi @BrandonMcAlister,
Great, I did what you did (set the screen size to the smallest setting for each view and customize using that view). I was playing around with all sorts of things (panels, grids, placeholders, etc.) but found that your workaround works best to prevent overlap. Thanks!
Tiffany