HTML body's width attribute messing with native scrollbars of desktop googl

Flow
1

I’ve been forced to use this ugly code:

UI.getCurrent().getPage().executeJavaScript("document.getElementsByTagName(\"body\")[0]
.style.width = \"100%\"");

I had to use that because the vertical layout I was using as UI was extending past the HTML body’s width when the vertical scrollbar of the navigator appeared.

The class I was using looked something like that:

@Route
public class PatientDetailsView extends VerticalLayout implements HasUrlParameter<Integer> {
 	...
	}

Am I making some mistake? Is there an easier workaround?

2

Hello,

If you’re using Vaadin 10, then by default, the height and width of the body is set to 100vh and 100vw respectively.

In your main stylesheet, you can set the body’s width. For example:

Java

@HtmlImport("frontend://styles/shared-styles.html")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
public class MainLayout extends Div implements RouterLayout, PageConfigurator {
  ...
}

shared-styles.html

<custom-style>
  <style>
    body {
      width: 100%;
    }
  </style>
</custom-style>