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

Question

我想使用面板作为我的 UI 的内容，而不是 Window，但我仍然希望 header 部分存在于 Window class。所以我尝试了这个，但效果不佳：

@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 class 中，我将 header 设置为这样的面板；

@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 以正确的尺寸和背景颜色显示，但它仍然是面板上方和左侧的白色小空 space。我怎样才能删除那个边距？

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 上

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

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

css

sass

vaadin

vaadin7