How to make a layout occupy the entire screen?

Vaadin 6 / 7 / 8 Framework UI
1

I am trying to add a background image to a view. Since the layout in that view occupies only 75% of the screen, the background image also is applied only to that limit. But I want it to be applied to the entire screen, but I don’t know how to do it. When I used setSizeFull() method, it pushed the elements down to the bottom (some went below the screen level). How to do it correctly?

2

I think you can use one main layout to which u can apply the background image and setSizeFull for that main layout. Inside that layout you can have your existing layout (with 75%) and other elements
----JAVA----
@SuppressWarnings(“serial”)
@Theme(“vaadinbgimg”)
public class VaadinbgimgUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = VaadinbgimgUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout mainLayout = new VerticalLayout();
    final VerticalLayout subLayout = new VerticalLayout();
    
    mainLayout.setMargin(true);
    mainLayout.setStyleName("bgimg");
    mainLayout.setSizeFull();
    setContent(mainLayout);
    
    subLayout.setMargin(true);
    subLayout.setWidth("75%");
    subLayout.setHeight("75%");        
    Button buttonS = new Button("In Sub Layout");
    subLayout.addComponent(buttonS);
    mainLayout.addComponent(subLayout);
    
    Button buttonM = new Button("In Main Layout");
    mainLayout.addComponent(buttonM);
}

}

—CSS—
.bgimg {
background: url(“BGImg/107875Page001.jpg”) !important;
}

3

My UI class contains only the navigator definition. The view that I am talking about is added to the navigator defined in the UI class. Actually, they are two separate files. As I already stated, I do not have enough components on the view to fill the screen. But I still want the layout to occupy the entire screen and the background image to be applied to it. Please have a look at my code below and share your comments.

/* MyUI.java */
public class MyUI extends UI
{
   protected void init() {
      ...
      ...
      new Navigator(this, this);
      getNavigator().addView(MyView.NAME, new MyView());
      ...
   }
}

/* MyView.java */
public class MyView extends CustomComponent implements View {
   ...
   ...
   public myView() {
      setCompositionRoot(rootLayout);
      rootLayout.setSizeFull();
      ...
      ...
   }
}
4

That should not make a difference. In the view you can do something like this:

/* MyView.java */
public class MyView extends CustomComponent implements View {
…
…
public myView() {
//All your components go on subLayout
subLayout = new VerticalLayout();
tf1 = new TextField(“Text Field 1”);
tf1.setWidth(“200px”);
subLayout .addComponent(tf1);

  buttonS = new Button("In Sub Layout");
  subLayout .addComponent(buttonS );

  subLayout .setSpacing(true);
  subLayout.setSizeUndefined();

  rootLayout.setSizeFull();
  rootLayout.setStyleName("bgimg");
  rootLayout.setComponentAlignment(fields, Alignment.MIDDLE_CENTER); 
  setCompositionRoot(rootLayout);
  ...
  ...

}
}