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:

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?

 

[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.

[JamesShreeve]

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

Thanks,

James

[BrandonMcAlister]

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.

[WeiYing1]

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?

[WeiYing1]

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