Resizing a Tabsheet

Hi

I would like to know how to resize a tabsheet when the browser is resized.

One simple example could be:

[code]
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();

    layout.setMargin(true);
    layout.setSizeFull();
    setContent(layout);

    TabSheet tabsheet = new TabSheet();
    tabsheet.setSizeFull();
    tabsheet.addTab(new VerticalLayout(), "Tab1");
    tabsheet.addTab(new VerticalLayout(), "Tab2");
    tabsheet.addTab(new VerticalLayout(), "Tab3");

    layout.addComponent(tabsheet);
}

[/code]You can find more information at https://vaadin.com/book/-/page/layout.settings.html

Hi

thanks for that. I
Right now I have four tabs aligned more to the left and next to the 4th tab there is an empty space. would also like to know how you could set the tabs in such a way to get the tabs spreaded across the layout.

In other words I would like the tabsheet to be scalable because its for a touchkit application.

I have two images of the tabsheet

Hi

thanks for that. I
Right now I have four tabs aligned more to the left and next to the 4th tab there is an empty space. would also like to know how you could set the tabs in such a way to get the tabs spreaded across the layout.

In other words I would like the tabsheet to be scalable because its for a touchkit application.

I have attached tabsheet1 which shows the tabsheet, ideally I want it to spread out throught the layout and resize accordingly
14207.png

With TouchKit you should probably be using TabBarView instead. It’s a TabSheet-like component specifically designed for mobile devices. By default, the tabs in it are placed at the bottom, but you can easily change that with CSS; it uses absolute positioning, so moving things around is very simple.

Hi, there is a tab bar view at the bottom. A I am trying to have tab sheet inside the touchkit application which is linked to a separate view. In other words I have the tabBar view at the bottom and I want the users to access their details via a tabsheet in the screen.

It seems that there is space in the contact history tab and it has not set it to the full screen size. I have the tabsheet in the vertical layout. I want the tab sheet to be resized in mobile device but it seems its not working.

private Component initComponent() {

      HorizontalLayout layout = new HorizontalLayout();
      layout.setMargin(true);
  
    VerticalLayout tab1Layout = new VerticalLayout();
    tab1Layout.setMargin(true);
    tab1Layout.addComponent(new Label("There are no previously saved actions."));

    VerticalLayout tab2Layout = new VerticalLayout();
    tab2Layout.setMargin(true);
    tab2Layout.addComponent(new Label("There are no saved notes."));

    VerticalLayout tab3Layout = new VerticalLayout();
    tab3Layout.setMargin(true);
    tab3Layout.addComponent(new Label("There are currently no issues."));
    
    VerticalLayout tab4Layout = new VerticalLayout();
    tab4Layout.setMargin(true);
    tab4Layout.addComponent(new Label("There are currently no issues."));
    TabSheet t = new TabSheet();
    t.addTab(buildInfoTab(), "Info").setStyleName("info");
    t.addTab(buildAccountsTab(), "Accounts").setStyleName("accounts");
    t.addTab(tab3Layout, "Requests").setStyleName("requests");
    t.addTab(tab4Layout, "Contact History").setStyleName("contact-history");
    t.setSizeFull();
    t.setSizeUndefined();
    layout.addComponent(t);
    layout.setSizeFull();
    return layout;
}

When I set it to t.setSizeUnDefined() it shrinks .

However I want the tabsheet to take the entire space in the layout and to be automatically resize. Can this be done?
14208.png

The above screen shot and this one shown in Iphone 4s in different ways.

It is not properly aligned.
14209.png

Any idea on this please?