layout to fit browser window

Flow
1

I have created a page layout in Vaadin 13 that includes a header, content and a footer. It renders fine, but it sized itself to the size of the components it is rendering. I would like the layout to size itself to fit the size of the browser window. Any guidance on how I might do this?

2

Hi Anthony,

If you are using a layout, there should be a setSizeFull() method, which basically sets width and height to 100%.

3

Hi Martin,
Thank you for the response. I did this and get the width working correctly but the height will not respond to % for some reason. If I hard code height as pixels in the layout or in the content it will respond.

4

Do you have a viewport defined? If you don’t have it already, try adding the following line at the top-level layout (or just the view if you don’t use layouts):

@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")

You can also try to set height to “100vh”. See https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css

5

Martin,
The Viewport annotation by itself did not seem to have an affect, but when I added the “100vh” it worked perfectly. Thanks so much for your help!

6

I do have a follow up related to this question. I have a Div object named ‘content’ that sits between the Menu Bar layout and the Footer layout that now display vertically centered, left justified between the Menu Bar and the Footer. This content object holds text and grid objects that get displayed. I would like to position this content in the top left corner of its given area. I tried two approaches but was unable to get either to work to the desired affect.

approach 1. As a Div, assign flexbox attribute:

content.getStyle().set(“align-items”, “flex-start”);
//am thinking my syntax is not correct to get a top left justified position

approach 2. Redefine content as a HorizontalLayout and a VerticalLayout:
content.setJustifyContentMode(FlexComponent.JustifyContentMode.START);
//I was surprised this did not work.

Appreciate your input.

7

Hi Anthony,

You can using HorizontalLayout or VerticalLayout or just use regular Div’s with flex settings. See this sample app for aligning and centering using flex:


import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.page.BodySize;
import com.vaadin.flow.component.page.Viewport;
import com.vaadin.flow.router.Route;

@Route("")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
@BodySize(height = "100vh", width = "100vw")
public class ResponsiveDemo extends Composite<Div> {
   public ResponsiveDemo() {

      // Set up as flex
      getElement().getStyle().set("height", "100%");
      getElement().getStyle().set("display", "flex");
      getElement().getStyle().set("flex-direction", "column");

      // Create header
      Div header = new Div(new Label("Header"));
      header.getStyle().set("background", "#777777");

      // Create content
      Div content = new Div();
      content.getStyle().set("background", "#dddddd");
      content.getStyle().set("display", "flex");

      // Create controls to manipulate content position
      Div controls = new Div();
      controls.add(new Checkbox("Flex-grow", e -> {
         content.getStyle().set("flex-grow", content.getStyle().get("flex-grow") == null ? "1" : null);
      }));

      ComboBox<String> justify = new ComboBox<>();
      justify.setPlaceholder("justify-content");
      justify.setItems("flex-start", "center", "flex-end");
      justify.addValueChangeListener(e -> {
         content.getStyle().set("justify-content", e.getValue());
      });
      controls.add(new Label(" justify Content "), justify);

      ComboBox<String> align = new ComboBox<>();
      align.setItems("flex-start", "center", "flex-end");
      align.addValueChangeListener(e -> {
         content.getStyle().set("align-items", e.getValue());
      });
      controls.add(new Label(" align-items "), align);
      content.add(controls);

      // Create footer
      Div footer = new Div(new Label("Footer"));
      footer.getStyle().set("background", "#777777");

      // Add components to the main content
      getContent().add(header, content, footer);
   }
}

Also check https://css-tricks.com/snippets/css/a-guide-to-flexbox/

8

Martin,
Thank you again. Seeing this example helped me get the layout adjusted correctly. Working as desired.