I’ve got an example of being able to either have scrollbars or a natural size set, but not both. I’m try to have a Horizontal layout with a panel (for the scrollbars) on the left, and the remaining space on the right taken up with a VerticalLayout.
ie.
Horizontal Panel
-----100% width ---------
Panel VerticalLayout
I want the Panel to have scrollbars and be naturally sized. However, I can’t seem to do it. I’ve included a test example below and you can see different behaviors depending on if the ‘test’ variable is true or false.
If test is true, the Panel is naturally sized, but no scrollbar.
If test is false, the Panel has a manually set expand size (not ideal) but does have scrollbars.
Here’s my solution, allowing the Panel to have “natural” size in horizontal direction, but 100% size in vertical direction, providing scrollbars when needed (see the bold part near the end).
Note, that there is no min or max size definition in Vaadin components/layouts, if that’s something you were trying to accomplish. The
DashLayout add-on provides experimental support for that, though.
package com.example.testvaadinproject;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.themes.Runo;
public class TestWindow extends Window {
private HorizontalLayout horizontalLayout = new HorizontalLayout();
private VerticalLayout rightSideLayout = new VerticalLayout();
private VerticalLayout mainLayout = new VerticalLayout();
private Panel treePanel = new Panel();
private boolean test = false;
public TestWindow() {
setSizeFull();
((VerticalLayout)this.getContent()).setSizeFull();
mainLayout.setSizeFull();
mainLayout.addComponent(horizontalLayout);
addComponent(mainLayout);
setupHorizontalLayout();
}
private void setupHorizontalLayout() {
horizontalLayout.addStyleName("brown");
horizontalLayout.setSizeFull();
horizontalLayout.setSpacing(true);
horizontalLayout.setMargin(true);
horizontalLayout.addComponent(treePanel);
horizontalLayout.addComponent(rightSideLayout);
horizontalLayout.setExpandRatio(rightSideLayout, 1f);
if(test){
horizontalLayout.setExpandRatio(treePanel, .3f);
}
setupTreeLayout();
setupRightSideLayout();
}
private void setupRightSideLayout() {
rightSideLayout.setSizeFull();
Label rightLabel = new Label("right label right label right label right label right label right label right label right label right label right label right label right label right label right label right label right label right label right label");
rightLabel.setSizeUndefined();
rightSideLayout.addComponent(rightLabel);
rightSideLayout.addStyleName("orange");
}
private void setupTreeLayout() {
VerticalLayout panelLayout = new VerticalLayout();
panelLayout.setMargin(true);
panelLayout.setSizeUndefined();
treePanel.setContent(panelLayout);
treePanel.setSizeUndefined();
if(test){
treePanel.setSizeFull();
}[b]
else {
treePanel.setHeight("100%");
}
[/b]
for (int i = 0; i < 40; i++) {
Label leftLabel = new Label("Label " + i + " ");
leftLabel.setSizeUndefined();
treePanel.addComponent(leftLabel);
}
}
}
Thanks very much for the response and suggested fix! I appreciate you taking the time to help me.
Now, a couple of things:
how does the fix work? I thought that setting the height to 100% would make that you don’t get scrollbars, not the other way around! I’m obviously missing something…
the left panel is not naturally sized (at least height wise) which is what I’m trying to address. I have a few places in my application where its fine that the panel is 100% height, but other places where this isn’t ideal.
Why should we have to set height when what is really desired is to have the panel be as small as possible?
The way the Panel works, is that when it is “naturally” sized (or undefined size in Vaadin speak), no scrollbars are presented, ever. Only when you set some explicit size for the Panel you get scrollbars if the content of that Panel overflows.
Core layouts work differently: if an exlicit size is defined, all overflowing components are cut off, and no scrollbars are presented.
From what I gather, you would like the Panel to grow with its content, but stop growing when there is no more room left to grow inside the parent layout. And that would in effect be max-height=100% what you’re trying to achieve.
And unfortunately there’s no component currently to handle that (DashLayout only allows pixel values for max/min-width/height). You will need some CSS trickery to get that to work. The easiest way would be to implement it using CssLayout and max-height and overflow CSS properties. You will also need to make the layout look like a panel, but that’s not very hard (background color and border). Note though, that max-height does not work in IE6, so if you need to support that, you will need a bit of JavaScript or CSS expressions.
I think this is what I’m looking for. I want a panel or some other layout that will:
be constrained by its parent
grow to its natural size, subject to #1
show scrollbars if all content within the panel/layout not displayed
I did not understand the difference between Panel and the core layouts fully until now. I really think that your statements about how it works should be in the manual - I checked in the book of vaadin, ch. 6.6 and didn’t see anything about it. It really helps to clarify layout in general, I was quite mystified by this behavior…
My suggestion would be to make a new component for vaadin 7 which is scrollable without having to worry about the inner frame (which works, but is unintuitive and somewhat awkward), ideally satisfying the requirements above. But I’m sure you have already thought of that! I would be happy to create a jira or be a tester if that helps…
I’ve had the idea of implementing a simple ScrollView component, that would just render one component inside it and provide all scrolling related functionalities. The Panel component could then extend from that to add the decorations.
But I think there aren’t any official plans for that for Vaadin 7, but I’ll see what I can do to make it happen. And max/min-width/height are definitely on the list of features that I’m trying to push for all components.
If you wish to promote some features, there’s the
Vaadin UserVoice page that you can use, but the official development site is our
Trac , where you can create
new tickets for bugs and enhancements.