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; } } }

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

JasonBOCQUET

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 :

It's very nice.

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

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 :

Find more posts tagged with

ArcGIS Enterprise

Accepted answers

ZhenZhang22

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

ZhenZhang22

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

All comments

ZhenZhang22

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

JasonBOCQUET

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 ?

ZhenZhang22

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

JasonBOCQUET

@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

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

JasonBOCQUET

Yeah it's better thanks !!

Finally i see another problem, but in smaller screen :

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 ?

ZhenZhang22

The sidebar uses % for its width, so when the window gets too small, the sidebar becomes too narrow to show properly. If you set the width in px instead, it stays fixed and the cursor button won’t disappear.

Best,
Zhen

JasonBOCQUET

Ok, so if I understand correctly : heigth and width have to be set with px instead of % to be more adaptative of the resolution of the user's screen ?

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.