Vertical Layout set width 100 % problem

General
1

Hi guys,

I have set the width of the vertical layout to 100% but it doesn’t take full width of browser.
When i check in Fire bug what i found is that
the default div is taking size 1244 px; instead of 1280

can you please suggest something?

Regards
Tarun Sawlani

2

Hi,

you have margins enabled in your layout (18px per side by default). Call setMargin(false) on the VerticalLayout and the inner div will take up the whole 1280px.

-Tepi

3

I have already set the margin to false.
But the default div of vertical layout takes only 1244 px.

4

Hi,

can you show your code? Here’s a simple example:

        Window mainWindow = new Window();
        mainWindow.setSizeFull();

        VerticalLayout vl = new VerticalLayout();
        vl.setSizeFull();
        vl.setMargin(false);
        mainWindow.setContent(vl);

        setMainWindow(mainWindow);

Which results in this in FireBug:

<div class="v-verticallayout" style="overflow: hidden; height: 330px; width: 1043px;">
<div style="overflow: hidden; margin: 0px; width: 1043px; height: 330px;">

-Tepi

5

(VerticalLayout) application.getMainWindow().getContent()).setMargin(false);
((VerticalLayout) application.getMainWindow().getContent()).setWidth(100,Sizeable.UNITS_PERCENTAGE);
root = (VerticalLayout) application.getMainWindow().getContent();
root.setMargin(false);
root.setWidth(100,Sizeable.UNITS_PERCENTAGE);

             headerHLayout = new HoriontalLayout();
             headerHLayout.setWidth(100,Sizeable.UNITS_PERCENTAGE);	
	root.addcomponent(headerHLayout);

Regards

6

Hi again,

I tried this:

        Window mainWindow = new Window();
        mainWindow.setSizeFull();
        setMainWindow(mainWindow);

        ((VerticalLayout) getMainWindow().getContent()).setMargin(false);
        ((VerticalLayout) getMainWindow().getContent()).setWidth(100,
                Sizeable.UNITS_PERCENTAGE);
        VerticalLayout root = (VerticalLayout) getMainWindow().getContent();
        root.setMargin(false);
        root.setWidth(100, Sizeable.UNITS_PERCENTAGE);

        HorizontalLayout headerHLayout = new HorizontalLayout();
        headerHLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);
        root.addComponent(headerHLayout);

With the same result again, the widths are the same:

<div class="v-verticallayout" style="overflow: hidden; width: 1043px; height: 0px;">
<div style="overflow: hidden; margin: 0px; width: 1043px; height: 0px;">

Are you certain that you are not resetting the margin somewhere else in your code? Which Vaadin version are you using (although I do not remember such an issue in any version)?

-Tepi

7

Ya thanks after seeing your previous reply i tried the same thing . And i was about to reply you.

Thanks… :slight_smile:
Its working fine…
The issue may be because of taking the main window content as a vertical layout.