Layout Problems

I want to create a Layout what looks like that. →

[url=http://www7.pic-upload.de/16.10.13/jmfxdrq9j9m4.png]


This is a whole component loaded into a HTML Layout. The Problem is, that when I try to realize this with a verticalLayout it is splited evenly, and when I am trying to solve it with Expand Ratio = 1.0 for the tabSheet it is not filling the whole space available. How is it possible to generate such an layout?

[/url]

Yes, expandratio for the tabsheet is what you need to do. So, something like:

mainLayout.setSizeFull();
mainLayout.addComponent(button);
mainLayout.addComponent(tabsheet);
mainLayout.setExpandRatio(tabsheet, 1);
tabsheet.setSizeFull();

Try that, and report back.

Problem stil exists.
I’ve got a “mainLayout” which is a verticalLayout with setSizeFull. In this Layout I’ve got two other Layouts. One is containing the button with auto/auto. And the other is containing the tabsheet.

Only the Tabnavigation is visible now. Not the content.

I want to have a design which is variable and not set to a specific size.

what’s the size of the content? Can you post sample code?

Please post the code.

I suspect the problem lighs with the second layout containing the tabsheet. Do you really need it - can’t you just add it to the mainLayout, as Thomas suggests in his example?

I started using designer… “Shame on me :D”

package com.example.callcenterdialog;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.VerticalLayout;

public class ui_calls extends CustomComponent {

    /*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */

    @AutoGenerated
    private VerticalLayout mainLayout;
    @AutoGenerated
    private VerticalLayout verticalLayout_2;
    @AutoGenerated
    private TabSheet tabSheet_1;
    @AutoGenerated
    private VerticalLayout verticalLayout_3;
    @AutoGenerated
    private Button button_5;
    @AutoGenerated
    private Button button_4;
    @AutoGenerated
    private HorizontalLayout horizontalLayout_1;
    @AutoGenerated
    private Button button_1;
    /**
     * The constructor should first build the main layout, set the
     * composition root and then do any custom initialization.
     *
     * The constructor will not be automatically regenerated by the
     * visual editor.
     */
    public ui_calls() {
            
        buildMainLayout();
        setCompositionRoot(mainLayout);
        mainLayout.setSizeFull();
        
        // TODO add user code here
        
        mainLayout.setSizeFull();
        verticalLayout_2.setSizeFull();
        verticalLayout_2.setExpandRatio(tabSheet_1, 1);
        tabSheet_1.setSizeFull();

    }

    @AutoGenerated
    private VerticalLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new VerticalLayout();
        mainLayout.setImmediate(false);
        mainLayout.setWidth("100%");
        mainLayout.setHeight("100%");
        mainLayout.setMargin(false);
        
        // top-level component properties
        setWidth("100.0%");
        setHeight("100.0%");
        
        // horizontalLayout_1
        horizontalLayout_1 = buildHorizontalLayout_1();
        mainLayout.addComponent(horizontalLayout_1);
        
        // verticalLayout_2
        verticalLayout_2 = buildVerticalLayout_2();
        mainLayout.addComponent(verticalLayout_2);
        
        return mainLayout;
    }

    @AutoGenerated
    private HorizontalLayout buildHorizontalLayout_1() {
        // common part: create layout
        horizontalLayout_1 = new HorizontalLayout();
        horizontalLayout_1.setImmediate(false);
        horizontalLayout_1.setWidth("-1px");
        horizontalLayout_1.setHeight("-1px");
        horizontalLayout_1.setMargin(true);
        horizontalLayout_1.setSpacing(true);
        
        // button_1
        button_1 = new Button();
        button_1.setCaption("Button");
        button_1.setImmediate(true);
        button_1.setWidth("-1px");
        button_1.setHeight("-1px");
        horizontalLayout_1.addComponent(button_1);
        
        return horizontalLayout_1;
    }

    @AutoGenerated
    private VerticalLayout buildVerticalLayout_2() {
        // common part: create layout
        verticalLayout_2 = new VerticalLayout();
        verticalLayout_2.setImmediate(false);
        verticalLayout_2.setWidth("-1px");
        verticalLayout_2.setHeight("-1px");
        verticalLayout_2.setMargin(false);
        
        // tabSheet_1
        tabSheet_1 = buildTabSheet_1();
        verticalLayout_2.addComponent(tabSheet_1);
        
        return verticalLayout_2;
    }

    @AutoGenerated
    private TabSheet buildTabSheet_1() {
        // common part: create layout
        tabSheet_1 = new TabSheet();
        tabSheet_1.setImmediate(true);
        tabSheet_1.setWidth("100.0%");
        tabSheet_1.setHeight("-1px");
        
        // verticalLayout_3
        verticalLayout_3 = buildVerticalLayout_3();
        tabSheet_1.addTab(verticalLayout_3, "Tab", null);
        
        return tabSheet_1;
    }

    @AutoGenerated
    private VerticalLayout buildVerticalLayout_3() {
        // common part: create layout
        verticalLayout_3 = new VerticalLayout();
        verticalLayout_3.setImmediate(false);
        verticalLayout_3.setWidth("-1px");
        verticalLayout_3.setHeight("-1px");
        verticalLayout_3.setMargin(false);
        
        // button_4
        button_4 = new Button();
        button_4.setCaption("Button");
        button_4.setImmediate(true);
        button_4.setWidth("-1px");
        button_4.setHeight("-1px");
        verticalLayout_3.addComponent(button_4);
        
        // button_5
        button_5 = new Button();
        button_5.setCaption("Button");
        button_5.setImmediate(true);
        button_5.setWidth("-1px");
        button_5.setHeight("-1px");
        verticalLayout_3.addComponent(button_5);
        
        return verticalLayout_3;
    }

}

I played around with the addressbook tutorial of vaadin and tried to style it as I want…

The problem exists if I change

HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();

to

VerticalLayout splitPanel = new VerticalLayout()

And the problem exists also when changing HorizontalSplitPanel to normal Panel…

Full Space is used with:

            private void initLayout() {
    Panel splitPanel = new Panel("");
    splitPanel.setSizeFull();
    setCompositionRoot(splitPanel);
    
    
    VerticalLayout leftLayout = new VerticalLayout();
    splitPanel.setContent(leftLayout);
    leftLayout.addComponent(table_calls);
    HorizontalLayout bottomLeftLayout = new HorizontalLayout();
    leftLayout.addComponent(bottomLeftLayout);
    bottomLeftLayout.addComponent(searchField);
    bottomLeftLayout.addComponent(addNewContactButton);
    leftLayout.setSizeFull();
    leftLayout.setExpandRatio(table_calls, 1);
    table_calls.setSizeFull();
    bottomLeftLayout.setWidth("100%");
    searchField.setWidth("100%");
    bottomLeftLayout.setExpandRatio(searchField, 1);
    }

But there is no table shown…

also I wrote

leftLayout.addComponent(table_calls);
...
leftLayout.setExpandRatio(table_calls, 1);
table_calls.setSizeFull();

I want to show a table even if it is empty.

I don’t have time to look at the code today, sorry… In the meanwhile, use something like FireBug to check which Layout is too small and work from there. You can also use the Vaadin Debug window (add ?debug to the URL, and find the ‘analyze layouts’ button to get a report of possible sizing conflicts).

Okay Thanks.

I got it now looking like this.

But as you can see there is a lot of space between the tabsheet and the footer. The Vertical Layout is as long, but the tabsheet only is about 408 px heigh. How can I solve this? And where does this height come from?

            private void initLayout()
            {
                Panel pl_group = new Panel("");                
                pl_group.setSizeFull();
                setCompositionRoot(pl_group);
                
                
                VerticalLayout vl_content = new VerticalLayout();
                VerticalLayout vl_tabsheet_content = new VerticalLayout();
                VerticalLayout vl_tab1_content = new VerticalLayout();
                HorizontalLayout hl_menubar = new HorizontalLayout();
                TabSheet ts_tabs = new TabSheet();
                
                pl_group.addStyleName("backgroundcolor_dark2");
                vl_content.addStyleName("backgroundcolor_dark2");
                hl_menubar.addStyleName("backgroundcolor_dark3");
                hl_menubar.addStyleName("box_shadow_grey");
                hl_menubar.addStyleName("round_border_10");
                
                pl_group.setContent(vl_content);
                    vl_content.addComponent(hl_menubar);
                    vl_content.addComponent(vl_tabsheet_content);    
                        vl_tabsheet_content.addComponent(ts_tabs);
                            ts_tabs.addComponent(vl_tab1_content);
                            vl_tab1_content.addComponent(table_calls);
                
                
               vl_content.setExpandRatio(vl_tabsheet_content, 1);
               vl_tabsheet_content.setExpandRatio(ts_tabs, 1);
               vl_tab1_content.setExpandRatio(table_calls, 1);
               
                                
                hl_menubar.addComponent(bt_menu);
                                
                ts_tabs.setSizeFull();
                
                vl_content.setMargin(true);
                vl_content.setSpacing(true);
                vl_content.setSizeFull();

                vl_tab1_content.setMargin(true);
                
                table_calls.setSizeFull();
                table_calls.setSortEnabled(false);

I think it’s coming from the vl_tab1_content; eliminate by doing v1_tab1_content.setSizeFull();

Mind you - you don’t really need the vl_tab1_content at all, here : you should be able to do

ts_tabs.addComponent(table_calls)

Sorry Charles,

but adding v1_tab1_content.setSizeFull(); doesnt’ help…

vl_tabsheet_content is default sized as well, when it should be full size. In fact, that layout isn’t even needed, just add the tabsheet directly to vl_content.

Hay Thomas,
thanks so much. It WORKS like a charm.

I’ve got the same problems on another UI and now I was looking for any rules when to set SizeFull and when to set expand ratio.
Are there any rules?

best regards

Christian

The rules depend entirely on what you want to achieve. You need to learn how Vaadin layouting works first; then you know what you need to do in order to achieve a layout you want. When you’ve understood how vaadin calculates sizes, the rest is easy :slight_smile:

The Book of Vaadin has some chapters on layouting, and it is also covered in the Vaadin Fundamentals course.

Same Problem as ever,…

I need a vertical Layout in the tabsheet to add a table and later maybe some other components.
Why is it only a standard height?

I haven’t understood when size is autoset and when it is not.

Can someone of you take a look over my sourcecode?

Thanks in advance

private void initLayout()
            {
                Panel pl_group = new Panel("");                
                pl_group.setSizeFull();
                setCompositionRoot(pl_group);
                
                
                VerticalLayout vl_content = new VerticalLayout();
                VerticalLayout vl_tabsheet_content = new VerticalLayout();
                VerticalLayout vl_tab1_content = new VerticalLayout();
                HorizontalLayout hl_menubar = new HorizontalLayout();
                TabSheet ts_tabs = new TabSheet();
               
                
                pl_group.setContent(vl_content);
                    vl_content.addComponent(hl_menubar);
                    vl_content.addComponent(ts_tabs);   
                            ts_tabs.addComponent(vl_tab1_content);
                                vl_tab1_content.addComponent(table_calls);
                
                
               vl_content.setExpandRatio(ts_tabs, 1);    
                                
                hl_menubar.addComponent(bt_menu);
                hl_menubar.addComponent(bt_make_call);    
                hl_menubar.setSpacing(true);
                
                vl_content.setMargin(true);
                vl_content.setSpacing(true);
                vl_content.setSizeFull();
                
                vl_tab1_content.setMargin(true);
                
                table_calls.setSizeFull();
                table_calls.setSortEnabled(false);
                table_calls.setSelectable(true);
            }

You are missing a setSizeFull() for ts_tabs and vl_tab1_content.