How to make component properly stretch to the top fixed panel

235
4
Jump to solution
11-08-2021 03:34 PM
AlejandroMari1
Occasional Contributor

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:

AlejandroMari1_1-1636414259642.png

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

 

0 Kudos
1 Solution

Accepted Solutions
jcarlson
MVP Honored Contributor

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.

jcarlson_0-1636478094082.png

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.

- Josh Carlson
Kendall County GIS

View solution in original post

0 Kudos
4 Replies
jcarlson
MVP Honored Contributor

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.

- Josh Carlson
Kendall County GIS
0 Kudos
AlejandroMari1
Occasional Contributor

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

0 Kudos
jcarlson
MVP Honored Contributor

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.

jcarlson_0-1636478094082.png

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.

- Josh Carlson
Kendall County GIS
0 Kudos
AlejandroMari1
Occasional Contributor

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

0 Kudos