How to set margins to zero

General
1

Am new to Vaadin and am having a hell of a time figuring out how to get rid of margins around components. I’ve searched the forum (wrong search terms?), read the book, and searched the API. Setting height and width to 100% does nothing. Setting border to false does nothing. Setting setSizeFull to true does nothing. Every combination I’ve tried does nothing (or worse). Those 10-20 pixel margins just laugh at me.

How does one eliminate the margins so the component fills the whole space (or the main window fills then entire browser window)? And why isn’t this the default? There must be a simple answer to this, but I can’t find it anywhere.

TIA for any help.

Chas.

2

Generally, setMargin(false) will do the trick.

3

Wow. Thanks for the rapid response!

Doesn’t work. Here is my code:

class MyApp extends Application {
  
  override def init: Unit = {
    
    val mainWindow = new Window("My Application")
    
    val tabsheet = new TabSheet()
    
    val myTabRoot = new VerticalLayout()
    myTabRoot.addComponent(
      new Label(
        """Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.
        Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra. Sed pulvinar, felis
        id consectetuer malesuada, enim nisl mattis elit, a facilisis tortor nibh quis
        leo. Sed augue lacus, pretium vitae, molestie eget, rhoncus quis, elit. Donec
        in augue. Fusce orci wisi, ornare id, mollis vel, lacinia vel, massa. Pellentesque
        habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."""
      )
    )
    
    tabsheet.addTab(myTabRoot)
    
    tabsheet.getTab(myTabRoot).setCaption("My Tab")
    
    tabsheet.hideTabs(true)
    
    mainWindow.addComponent(tabsheet)
    setMainWindow(mainWindow)
  } 
}

The above works beautifully, but gives me the ~15px margin.

I have tried (before I posted) setMargin(false), mainWindow.setMargin(false), tabSheet.setMargin(false) – none of them worked. In fact, they won’t compile:

Application.scala:37: not found: value setMargin
Application.scala:37: value setMargin is not a member of com.vaadin.ui.Window
Application.scala:37: value setMargin is not a member of com.vaadin.ui.TabSheet

I read the API and learned that setMargin is a method on Layout, but the API also says that getLayout is deprecated and I should use getContent. But getContent does not return the layout, it returns a ComponentContainer, which is a superclass of Layout, but not a Layout, hence no setMargin method.

Is it just me, or is this way more complicated than it should be? Do I have to explicitly create a layout for my main window and then setMargin on that?

Any ideas?

Chas.ponent(
new Label(

4

OK, to reply to myself, I tried setting the layout for the main window explicitly, then using setMargin on that. For anyone curious, here’s the code (it’s Scala – you’ll have to translate to get Java):

class MyApplication extends Application {
  
  override def init: Unit = {
    
    val mainWindow = new Window("My Application")
    val root = new VerticalLayout()
    
    val tabsheet = new TabSheet()
    
    val myTabRoot = new VerticalLayout()
    myTabRoot.addComponent(
      new Label(
        """Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.
        Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra. Sed pulvinar, felis
        id consectetuer malesuada, enim nisl mattis elit, a facilisis tortor nibh quis
        leo. Sed augue lacus, pretium vitae, molestie eget, rhoncus quis, elit. Donec
        in augue. Fusce orci wisi, ornare id, mollis vel, lacinia vel, massa. Pellentesque
        habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."""
      )
    )
    
    tabsheet.addTab(myTabRoot)
    
    tabsheet.getTab(myTabRoot).setCaption("My Tab")
    
    tabsheet.hideTabs(true)
    
    root.setMargin(false)
    root.addComponent(tabsheet)

    mainWindow.setContent(root)
    setMainWindow(mainWindow)
  } 
}

This still doesn’t stretch to fill the whole window vertically. Will work on that next.

(I am trying to implement a card stack using a tab sheet and hiding the tabs. I need the layout to fill the browser window completely.)

Chas.

5

Setting the height to 100% on the tab sheet did the trick! Thanks for the help! I’d been struggling with that for a couple of days on and off, and your response gave me the clue that I’d missed some trick.

Hope this helps someone else down the road.

Chas.

6

this is great, i have also spend a lot of time to get rid of the default margin.
thanks

7

Hi,

In latest version of Vaadin, I’ve found that to get rid of margins it is enough to simply replace:

window.addContent(root);

with:

window.setContent(root);
8

In some sense, this (with addComponent(), not addContent()) applies to add Vaadin versions: a Window has an implicit layout (VerticalLayout currently), so unless you call setMargins(false) on that layout as well, it will add some space around your own layout.

Usually, it makes sense to replace the implicit root layout by calling setContent() if you would only add one layout or component to it. This way, there is no hidden layer that has its own size settings etc. and that could also have a small impact on rendering performance.

9

That would explain it. Thanks!