[Lisbon Template] Fluid grid with max width

[Lisbon Template] Fluid grid with max width

Forge Component
Published on 2017-12-20 by OutSystems R&D
17 votes
Published on 2017-12-20 by OutSystems R&D


I've created a new Application using Lisbon theme, Grid type of "Fluid" and Max.Width of 1280px. The Header (App Name, menu and Login) is resticted to 1280 but not the main content. Is this not supported using the souse web block "LisbonTheme\Layout_Lisborn"

Hello Steve, 
"Layout_Lisbon" is it to be used with fullwidth to use more space for your content.
If you want to have a MainContent with a specific size  you should use the "Layout_Website". However, if you still want to work with "Layout_Lisbon", you can use the WebBlock with the name "Website_Section", which will use the size you define.
Best Regards, 
José Rosário

Hi Jose,

We are also using the "Layout_Lisbon", but on Wide desktop screens the content is really stretched and does not look great.

I was very excited when I came across this post. I changed our pages and then realized it only fixes part of the problem.

Adding the "Website_Section" to the "MainContent" placeholder does the trick for the main content, but the other placeholders ("Breadcrumbs", "Title", "Actions", etc) are still stretched across the entire width, which doesn't look tidy and neat.

When setting the Theme's Grid properties to Fluid with a max width, it gives the expectation that the "Layout_Lisbon" would adjust accordingly, but only the header and menu does.

It would be great if all the placeholders in the "Layout_Lisbon" would adjust.

You're probably wondering why not just use the "Layout_Website" with "Website_Title" and "Website_Section". I did look at it and this is our conundrum, we want the placeholders available in "Layout_Lisbon" but does not want the "ultra stretched" look on wide desktops.

What to do? What to do?

Kind regards,