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?

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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

BrandonMcAlister

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:

Scale and layout.PNG

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?

Find more posts tagged with

ArcGIS Enterprise

Accepted answers

All comments

JamesShreeve

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!

BrandonMcAlister

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.

JamesShreeve

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

BrandonMcAlister

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

Wei_Ying

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

BrandonMcAlister

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?

Wei_Ying

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

LindaStewart

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.

Wei_Ying

hi @LindaStewart ,

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.