Help with layout settings for height

[SaraKidd]

I'm creating a website in ExB online version. I am having so much trouble trying to configure the layout so that when the app is opened in any size browser, the content fills the page (I am just working on desktop at the moment and will come back to mobile).

I have the page set for scrolling (which I don't really need that space but I used that so the future mobile page has enough room for all the widgets).

I have a header and footer which are fine. Then I have a Block which contains a row. The row contains a sidebar on the left (with a feature widget in the side and the map in the main area) and a column on the right with a filter widget.

I have tried various configurations of stretch and auto for the height on each of these but the only way it seems to "hold" the right height is if I assign a px value. When I do that, the widgets of course do not change height and there is a lot of blank space underneath.

I want the map, details, and filter widgets to fill the space to the footer when the browser is different sizes. 

Any insights would be helpful. Thanks.

[jcarlson]

I've had trouble with this as well. You can't use % heights unless the item is pinned, but then it won't scroll, so it's not much help to you.

Why don't you just use a Fullscreen page, then for the mobile view, use a Column layout item to allow your widgets to scroll?

[SaraKidd]

Thanks for the suggestion. I'll have to test this to see if I can make it work. There is not a lot of real estate on the mobile screen and was hoping to avoid squishing things in and scrolling widgets. I have to decide if the layout issues are important enough to redo the app.

[jcarlson · Accepted solution]

For some of our "busier" apps, we eventually just had to drop a lot of features from the mobile view and put a disclaimer into the mobile view that said "This application was designed for desktop or tablet use. Functionality on mobile devices will be limited."

[SaraKidd]

Yeah, that is unfortunate, particularly when about 50% of visits are mobile. I'll play around and see if I can get the best of both worlds. That is what I thought I was going to get with the scrolling page!

[wmboulder]

Hi SaraKidd & Josh! 
I'm curious if you found a way to do this? I used a fullscreen page for desktop and am now unable to make it so a column widget scrolls on mobile. I anticipated this capability and am now stumped...from the discussion above, it sounds like you also thought this would be possible. Did you figure out a way to do it, or did you just add the mobile disclaimer to use on desktop?

Thank you both!

Whitney

[wmboulder]

I figured it out and thought I'd share the solution for anyone else with this issue. Originally, I had the column set to auto height, which didn't allow me to scroll through the widget. The solution is to set the column to "stretch" (I did this for both width and height so it encompassed the whole mobile page). This allowed the mobile version to function almost like a scrolling page, even though the original/desktop page is a fullscreen app (and not technically a scrolling page).
Hope it helps!

[jkdchjvcsdfckjcsdvcjh]

To achieve a flexible layout that adjusts to different browser sizes in ExB online version, you can use a combination of CSS properties and layout techniques. Here are some suggestions to help you configure the layout:

1. Use CSS Flexbox: Flexbox is a powerful layout module that allows you to create flexible and responsive designs. Apply flexbox properties to the containers that need to adapt their height.

2. Set appropriate flex properties: In your case, you have a block with a row that contains a sidebar and a column. You can set the following CSS properties on the container elements:

   • Block container: Set display: flex; flex-direction: column; to create a vertical layout.
   • Row container: Apply flex: 1; to make it take up the remaining vertical space.
   • Sidebar: Use flex: 1; to make it expand and fill the available height.
   • Column: Apply flex: 1; to make it expand and fill the available height.

3. Use percentage-based heights: Instead of assigning a fixed pixel value to the container elements, consider using percentage-based heights. For example, you can set the sidebar's height to 100% so that it takes up the entire height of the row container.

4. Consider min-height and max-height: If you want to ensure that the widgets don't become too small or too large, you can use min-height and max-height CSS properties on the containers. This will allow them to expand within a certain range based on the available space.