Cannot remove the margin between the panel and the top of the page with scss in Vaadin

Question

I would like to use a Panel as the content for my UI and not a Window, but I still would like to have the header part that exists in the Window class. So I tried this but it does not work perfectly:

@Theme("mytheme")
@CDIUI("")
public class MyUI extends UI {

    @Inject
    private CDIViewProvider provider;

    @Override
    protected void init(VaadinRequest request) {
        Navigator navigator = new Navigator();
        navigator.addProvider(provider);
        navigator.navigateTo("mypanel");  
    }   
}

Then, in my MyPanel class I set the header as a panel like this;

@CDIView("mypanel")
public class MyPanel extends com.vaadin.ui.Panel implements View {
    @Inject
    private MySubPanel mySubPanel;    

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event) {
        FormLayout layout = new FormLayout();
        Panel headerPanel = new Panel();
        headerPanel.addStyleName("header-panel");
        layout.addComponent(headerPanel);
        layout.addComponent(mySubPanel);
        this.setContent(layout);
    }
}

And finally, in mytheme.css I have the following:

@import "../valo/valo.scss";
@mixin mytheme {
   // some scss code
}

.header-panel {
   height: 50px;
   width: 100%;
   background: red repeat-x;
   margin: 0px;
   padding-top: 0px;
}

The headerPanel appears with the correct measures and background color but it is still a small empty, white space above the panel and to the left of it. How can I remove that margin?

Answer 1

I think that Your css should be inside the mythem tag:

@import "../valo/valo.scss";
@mixin mytheme {
      .header-panel {
          height: 50px;
          width: 100%;
          background: red repeat-x;
          margin: 0px;
          padding-top: 0px;
       }
 }

And You can try to set:

    setMargin(false);
    setSpacing(false);

on your FormLayout