Hardcoding Height and width changes look on different browsers

Vaadin 6 / 7 / 8 Framework UI
1

It seems that we cannot specify just percentages to verticalLayout and HorizontalLayouts. At the top we have to specify pixel dimensions otherwise the UI will not even render and vaadin throws error in the debug window.

But when the size (height and width) is hardcoded, the UI looks very different on different browsers on the same machine. It seems to also become sensitive to the screen resolution.

How do we create UI that covers the whole height and width of the browser without hardcoding the height and width of top level components in Vaadin? This way hopefully, it will scale to different screen resolutions and behave identically in different browsers.

Attached are screen shots on the same machine. One on Firefox and one on Firefox displaying the exact UI.

Thanks
13486.png
13487.png

2

Hi,

Hard to say what the problem is without seeing any code. But it sounds like you’re not trying to do anything Vaadin wouldn’t easily do, so I’m very confident there’s a solution.

I guess the main points to check are that your UI as well as the main layout (i.e. content) are 100x100% size. From there, everything else sized with percentages should scale just nicely. And do check your layout expand ratios if you don’t want to distribute the available space uniformly for all components.

3

package com.example.vaadintest;

import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings(“serial”)
@Theme(“vaadintest”)
public class VaadintestUI extends UI {

@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);

TestComponent t = new TestComponent();
layout.addComponent(t);

layout.setSizeFull();
t.setSizeFull();
}

}

package com.example.vaadintest;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.HorizontalSplitPanel;

public class TestComponent extends CustomComponent {

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

@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private HorizontalSplitPanel horizontalSplitPanel_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 TestComponent() {
    buildMainLayout();
    setCompositionRoot(mainLayout);

// TODO add user code here
mainLayout.setSizeFull();
horizontalSplitPanel_1.setSizeFull();
}

@AutoGenerated
private AbsoluteLayout buildMainLayout() {
// common part: create layout
mainLayout = new AbsoluteLayout();
mainLayout.setImmediate(false);
mainLayout.setWidth(“100%”);
mainLayout.setHeight(“100%”);

// top-level component properties
setWidth(“100.0%”);
setHeight(“100.0%”);

// horizontalSplitPanel_1
horizontalSplitPanel_1 = new HorizontalSplitPanel();
horizontalSplitPanel_1.setImmediate(false);
horizontalSplitPanel_1.setWidth(“100.0%”);
horizontalSplitPanel_1.setHeight(“100.0%”);
mainLayout
.addComponent(horizontalSplitPanel_1, “top:0.0px;left:0.0px;”);

return mainLayout;
}

}

With the code above nothings renders on the screen (I expected to see a Horizontal split bar). We want to avoid giving any hardcoded absolute pixel values as sizes so that the components occpy the whole browser under all circumstances.

The debug window reports the following problem

Id19
ConnectorHorizontalSplitPanelConnector
WidgetVSplitPanelHorizontal
Captionnull
Description
Width100.0% (actual: 0px)
Height100.0% (actual: 0px)
First childnull
Read onlyfalse
Resources{}
Error messagenull
Immediatefalse
Enabledtrue
Registered event listenersnull
Stylesnull
Splitter statecom.vaadin.shared.ui.splitpanel.AbstractSplitPanelState$SplitterState@a4
Second childnull
Primary style namev-splitpanel-horizontal

4

Hi,

the reason is this bug:
http://dev.vaadin.com/ticket/13131

5

Thank you. The workaround in the bug seems to solve my problem. Sounds like all you (Vaadin) have to do is change the automatic code generation template on the eclipse plugin - The section where you create a new composite.

In any case, by default I think all embedded components must occupy the full size of the parent. One should not have to code to make this happen.

Regards,