Simple expanding layout example

Ive been trying to get a working example of the layout I have in mind. It’s nothing too complicated and I really hope the issue is just tiredness or stupidity on my part :).

I want a page which has a static sized column on the left, and a content pane on the right which expands with the page, but also has a min-width, at which point horizontal scrollbars appear (appropriately at the bottom of the view port and not at the bottom of the content).

I would start by pasting code but I have so many examples of what doesnt work that Id like to start by asking what should work? If this is too much to ask then I can round up some code, but basically thus far nothing has worked.

If the answer is that I need to write completely custom CSS then thats fine, I was just hoping otherwise.

I think you could do this with a HorizontalLayout containing two components: the first one should have a defined width (e.g. “300px”) and the second (content) one should have “100%” width. You should also set an expand ratio for the second component in the HorizontalLayout.

Component heights should not matter here.

The only thing you need to do in CSS is the min-width for the HorizontalLayout. You can do this by adding a style name to the layout and a corresponding rule in your theme CSS.

If you still need some details, please don’t hesitate to ask.

Hey Dan,

So you basically want a layout like this forum page for example. So that when you shrink the size of the window horizontal scrollbars appear, right?

In this case you have to do something like this:
(Sry if something is not quite right i don’t have an environment ready right now)

Main Window/UI = setSizeFull

  • Content = setSizeFull

  • Panel = setSizeFull + setStyleName() [margin: 0 auto;]

  • Content = defined Size (e.g. 100px)

Wow - so I really thought this wouldn’t work, but it did. I guess my thought was that Horizontal Layouts should not be able to have 100% width? Because they expand as you add components. So how can you have one part of a horizontal layout expand to fill the screen when the layout itself should only expand with the component? Where is the reference point?

While not implement this way, it’s no different than a TABLE set to 100%, with the first TD set to a fixed size, and the second TD set to 100% (so it takes up the remainder space).

When you set the layout to 100%, you won’t get scrollbars in that direction, I believe, so if you add more components than will fit, they can be clipped. If it’s not set to 100% width, and you add more components than can fit in the allotted space, scrollbars should appear. (I hope I have that right since it can be a bit confusing!)

It makes sense - but I feel like I really read somewhere that VerticalLayouts cannot have 100% height (since they expand in that direction) and I just assumed that HLs could also not have 100% width?

Not sure where I got that info from, but I feel like Ive had issues with using setSizeFull on those layouts due to their expanding nature.

Either way - this seems to work now, so thanks for the help!