[Lisbon Template] Fluid grid with max width

Forge Component
Published on 9 Mar by OutSystems R&D
32 votes
Published on 9 Mar 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,


Hello, I echo to CJ's post almost two years ago... looks like this question hasn't been fully resolved. What I (guess CJ too) need, is to get the overall layout and behavor of Lisbon theme, except the screen elements do not stretched out. The good example is the width of Liverpool theme, when showing on big screen, the overall content is kept at around 1300-1400 width, this can defintely help users to keep they eyes focus. But Liverpool have the page header and menu bars split into two rows, which is a wastage of vertical screen estate. My preference is to have Lisbon layout but the max-width control as Liverpool. 

Any ultimate solution?

Hi Leo. looks like it is solved :)