Select to view content in your preferred language

How to set the sidebar widget to be adapted of different size of screen ?

643
13
Jump to solution
06-30-2025 07:03 AM
Labels (1)
JasonBOCQUET
Frequent Contributor

Hi community,

I have an issue with the sidebar widget. It seems to not be able to auto-sized depending of the screen resolution of the user.

I'll explain. I set the width to 30% and the height to 26.5% (I need to set this height because I insert a layer list widget on the sidebar widget with 3 layers). Then I set the button to reduce the panel to be in center of the list widget.

 

My List widget is setted to be auto sized on lentgh and width.

 

Her is the rendering on my first screen : 

JasonBOCQUET_0-1751291860170.png

It's very nice.

 

And here is the screen on my second screen (more larger) :

JasonBOCQUET_1-1751291885501.png

 

Holy S. my text jump and the reduce button moved. WHY ???

 

What I have to do to make this coherent when the screen size changed ?

 

Thanks for your help.

 

Here is the screen of my settings :

 

JasonBOCQUET_3-1751292126476.pngJasonBOCQUET_4-1751292139383.pngJasonBOCQUET_5-1751292148992.pngJasonBOCQUET_6-1751292155266.png

 

 

 

2 Solutions

Accepted Solutions
ZhenZhang22
Esri Contributor

Hi JasonBOCQUET,

Thanks for the video!

I suggest setting the width and height of the Map Layers widget inside the Sidebar to Custom 100%. This should help prevent the button shifting issue when you resize the window.Screenshot 2025-07-01 180646.png

Please give it a try and let us know if you run into any other problems.

Thanks again!

Zhen

View solution in original post

ZhenZhang22
Esri Contributor

Hi JasonBOCQUET,

Try setting the Sidebar widget’s height to px instead of %. This prevents empty space below the "Offres" layer on larger screens.

Thanks,
Zhen

image.png

View solution in original post

0 Kudos
13 Replies
ZhenZhang22
Esri Contributor

Hi JasonBOCQUET,

Thanks for your message!

I tried with your settings but couldn’t see the same issue on my side. Could you please share a simple sample app to help us check?

Thanks!

Zhen

0 Kudos
JasonBOCQUET
Frequent Contributor

Hi @ZhenZhang22 I'm working on Experience Builder Dev Edition 1.17 and export my apps on Enterprise 1.11.  The problem is observed when I'm on localhost to my dev edition.

I don't know how can I share you something because all is blocked by my organization to do not share outside 😞

Did you got the exact same result as my first screen ? And if you try on another screen nothing move ?

 

0 Kudos
ZhenZhang22
Esri Contributor

Hi JasonBOCQUET,

If possible, could you please share a short video showing your configuration and how the issue happens? This will help us avoid missing any key steps when reproducing it.

You can send it to my email: zhenzhang@esri.com.

Thanks a lot!

Zhen

0 Kudos
JasonBOCQUET
Frequent Contributor

@ZhenZhang22  i have send a mail to you a few second ago. The video is 8MB size, i hope it can be join to a mail. Tell me if you receive nothing. thanks !

ZhenZhang22
Esri Contributor

Hi JasonBOCQUET,

Thanks for the video!

I suggest setting the width and height of the Map Layers widget inside the Sidebar to Custom 100%. This should help prevent the button shifting issue when you resize the window.Screenshot 2025-07-01 180646.png

Please give it a try and let us know if you run into any other problems.

Thanks again!

Zhen

JasonBOCQUET
Frequent Contributor

Thanks @ZhenZhang22 it's clearly better when i resize my windows page, the size adapt automatically.

 

I have not my second screen today, i will try tomorrow to see in a bigger screen how it's rendering.

 

0 Kudos
JasonBOCQUET
Frequent Contributor

I'm back @ZhenZhang22 and i tried with a bigger screen : 

JasonBOCQUET_0-1751463985101.png

I do not why the tool do that ?? i don't want to have this blank space under my "Offres" layer. 

 

Maybe it's because the List Widget is not entirely adaptative of the screen size changes ?

 

Do you have any idea of what can I set to have a best rendering if the screen is bigger ? 

 

The good point is that the button to deploy/reduce the sidebar is now always in the center !

0 Kudos
ZhenZhang22
Esri Contributor

Hi JasonBOCQUET,

Try setting the Sidebar widget’s height to px instead of %. This prevents empty space below the "Offres" layer on larger screens.

Thanks,
Zhen

image.png

0 Kudos
JasonBOCQUET
Frequent Contributor

Yeah it's better thanks !!

 

Finally i see another problem, but in smaller screen :

JasonBOCQUET_0-1751531179731.png

The cursor button to reduce the sidebar seems to disapear. I tried with setting the size on % but it changes nothing. Do you have any idea ?

 

0 Kudos