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 make component properly stretch to the top fixed panel

AlejandroMari1

Hello! I'm trying to build an application where I have a top banner with a fixed height, and the components below should take the rest of the screen. This works when you start with a template (Jewelry box for example), but when I want to create my own thing, the components don't "snap" to the fixed panel, so as you resize the screen, they start to overlap:

As you can see in the image, below the banner I have a fixed panel (yellow) and a Sidebar. They both overlap the top banner as soon as I start resizing my browser and reducing the height.

Both have "stretch" selected for height configuration. When I try to resize either of them vertically it won't let me "snap" it to the top banner (which is also a fixed panel).

Any thoughts?

Thanks!

Alejandro

Finde mehr Beiträge mit dem Tag

Accepted answers

jcarlson

You're halfway there. Stretch means it should take all available space up to the limits you have defined for it, but it does not automatically account for the presence of other widgets.

To be clear, I'm not talking about setting the height to a fixed value, but rather the padding.

A widget with the configuration pictured will always go from 100 pixels from the top to the bottom of the container/page, regardless of the window size.

All comments

jcarlson

Can you double-check the size/position settings on the widgets? Make sure they're set to pixels instead of percent, as that sounds like it may be involved. That way the height of the widgets is independent of the browser window.

AlejandroMari1

Hi @jcarlson , thanks for your response. So the top fixed panel (The banner) has a pixel height, but the bottom ones are set to stretch, as I want them to cover the rest of the screen independently of the browser size (if I put them with a fixed height, that will only work for a single browser window size).

My understanding is that when a widget is set to "stretch" it should take all the available space up to the next widget, but in this case it acts as if the top banner wasn't there.

Alejandro

jcarlson

You're halfway there. Stretch means it should take all available space up to the limits you have defined for it, but it does not automatically account for the presence of other widgets.

To be clear, I'm not talking about setting the height to a fixed value, but rather the padding.

A widget with the configuration pictured will always go from 100 pixels from the top to the bottom of the container/page, regardless of the window size.

AlejandroMari1

Thank you!!!! That did it! I was going crazy trying to figure it out.

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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