panel with horizontal and vertical scroll bar


public void init(){
        Window main = new Window("Vaadin");
        mainLayout = (VerticalLayout) main.getContent();
        mainLayout.setMargin(false);
        setMainWindow(main);
        mainLayout.setSizeFull();
        panel = new Panel();
        panel.setSizeFull();
        mainLayout.addComponent(panel);
        panel.addComponent(inPanelLayout());
        panel.getContent().setSizeUndefined();
}
Layout inPanelLayout(){
        HorizontalLayout l = new HorizontalLayout();
        l.setCaption("Welcome");
        l.setWidth("100%");
        l.setHeight("100%");
        l.setSizeFull();
        VerticalLayout topLayout=new VerticalLayout();
        topLayout.setWidth("983px");
        topLayout.setHeight("176px");
        topLayout.setStyleName("topBackground");
        l.addComponent(topLayout);
        l.setComponentAlignment(topLayout,Alignment.TOP_CENTER);
        return l;
 }

What I want is the topLayout would be in the middle of the browser and when you narrow the browser or the width of the display resolution is less than 983px the panel would have horizontal and vertical scroll bar.
But the topLayout has been on the left,I want it will be the middle of the panel.

Hi,

The main core layouts don’t really support such a use case. You’re basically looking for min-width/max-width support, which Vaadin doesn’t have yet.

But you should be able to accomplish this with CssLayout and some custom CSS.

So replace the panel’s inner layout with a CssLayout (100% width), and add style name to it (so you can refer to it in CSS). You need to replace the line
panel.getContent().setSizeUndefined();
with
panel.getContent().setWidth(“100%”);

Then in your CSS:

.v-csslayout-mystyle {
  overflow: visible;
}

.v-csslayout-mystyle .v-panel {
  margin: 0 auto; /* center horizontally */
}

I didn’t test this at all, but let me know if it works.

Cheers,
Jouni

Thanks for your help.Here is the new code


    private Window main;
    private VerticalLayout mainLayout;
    private Panel panel;
    public void init(){
        setTheme("mythemes");
        main = new Window("Vaadin");
        mainLayout = (VerticalLayout) main.getContent();
        mainLayout.setMargin(false);
        setMainWindow(main);
        buildMainView();
    }
    void buildMainView(){
        mainLayout.setSizeFull();
        panel = new Panel();
        panel.setSizeFull();
        mainLayout.addComponent(panel);
        panel.addComponent(buildWelcomeScreen());
        panel.getContent().setWidth("100%");
    }
    Layout buildWelcomeScreen(){
        CssLayout l=new CssLayout();
        l.setWidth("100%");
        l.addStyleName("mystyle");
        VerticalLayout topLayout=new VerticalLayout();
        topLayout.setWidth("983px");
        topLayout.setHeight("176px");
        topLayout.setStyleName("topBackground");
        l.addComponent(topLayout);
        return l;
    }

style:
.v-csslayout-mystyle{  
	overflow: visible;
}
.v-csslayout-mystyle .v-panel{  
	margin: 0 auto; /* center horizontally */
}

But there is no scroll bar and the topLayout is on the left of the panel too

Instead of


panel.addComponent(buildWelcomeScreen());

do


panel.setContent(buildWelcomeScreen());

addComponent will just add the CssLayout inside the default VerticalLayout inside the panel, whereas setContent will replace the default VerticalLayout with the CssLayout.

Thank you for telling me to use css.What the way you told me didn’n worked.And I don’t know how to use css .Then I find the following code and it worked.


private Window main;
    private VerticalLayout mainLayout;
    private Panel panel;
    public void init(){
        setTheme("mythemes");
        main = new Window("Vaadin");
        mainLayout = (VerticalLayout) main.getContent();
        mainLayout.setMargin(false);
        setMainWindow(main);
        buildMainView();
    }
    void buildMainView(){
    	mainLayout.setSizeFull();
    	panel=new Panel();
    	panel.setSizeFull();
    	panel.addStyleName("test");
    	mainLayout.addComponent(panel);
    	panel.setContent(buildWelcomeScreen());
    }
    Layout buildWelcomeScreen(){
    	VerticalLayout l=new VerticalLayout();
    	l.setSizeUndefined();
    	VerticalLayout topLayout=new VerticalLayout();
    	topLayout.setWidth("983px");
    	topLayout.setHeight("176px");
    	topLayout.setStyleName("topBackground");
    	l.addComponent(topLayout);
    	l.setComponentAlignment(topLayout,Alignment.MIDDLE_CENTER);
    	return l;
    }

.v-panel-content-test > div {
  margin: 0 auto;
}

After this, I found that it is very important to learn how to use css.

.v-csslayout-mystyle .v-panel{ margin: 0 auto; /* center horizontally */}
I think this css would made the component inside of panel be the center,is it true?I think it not worked in my code.

Once again, thank you.

Well, now that I look your code a bit more carefully, I notice that you placed the CssLayout inside the panel your trying to center. What I suggested was that you replace the application root layout (the one you construct in the init method == mainWindow’s layout), and add the “mystyle” style name to that. Then the CSS I provided would work.

The CSS you use now centers the layout element inside the panel. But if that works for your case, then great, no need to change it!