topic Re: How to make component properly stretch to the top fixed panel in ArcGIS Experience Builder Questions

How to make component properly stretch to the top fixed panel

AlejandroMari1 — Mon, 08 Nov 2021 23:34:42 GMT

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

Re: How to make component properly stretch to the top fixed panel

jcarlson — Tue, 09 Nov 2021 02:34:23 GMT

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.

Re: How to make component properly stretch to the top fixed panel

AlejandroMari1 — Tue, 09 Nov 2021 15:45:58 GMT

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

Re: How to make component properly stretch to the top fixed panel

jcarlson — Tue, 09 Nov 2021 17:15:36 GMT

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.

Re: How to make component properly stretch to the top fixed panel

AlejandroMari1 — Tue, 09 Nov 2021 19:50:28 GMT

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