css - 无法使用 Vaadin 中的 scss 删除面板和页面顶部之间的边距

Question

我想使用面板作为我的 UI 的内容而不是窗口，但我仍然希望标题部分存在于窗口类中。所以我尝试了这个，但它不能完美地工作:

@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");  
    }   
}

然后，在我的 MyPanel 类中，我将页眉设置为这样的面板；

@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);
    }
}

最后，在 mytheme.css 中我有以下内容:

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

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

headerPanel 以正确的尺寸和背景颜色出现，但它仍然是面板上方左侧的一小块空白区域。我怎样才能删除那个边距？

Answer 1

我认为你的 css 应该在 mythem 标签内:

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

你可以尝试设置:

    setMargin(false);
    setSpacing(false);

在你的FormLayout上