vaadin - 删除 Gridlayout 中第一行和第二行之间的间距

Question

非常感谢您的提前帮助。

让我解释一下这个问题，

我有网格布局，我在第一行(称为标题行)中添加标签。在接下来的 5 行中，我添加了文本字段、组合字段和日期字段。

我面临的问题是，我想删除标题(第一)行和第二行之间的空间，并继续使用从第二行到最后一行的默认空间。我在快照中将空格突出显示为红线

请在附件中找到快照。有什么提示，请指教。

Answer 1

正如我在评论中提到的，组件在 GridLayout 中的位置由 css 中的 top 值定义。所以如果你想重新定位(在这种情况下删除空间)一个元素，你需要改变它。这里的问题是

• GridLayout 不必从顶部开始，因此您需要为顶部找出正确的值，
• 然后您需要使用 :n-th 子级区分正确的组件(在本例中为标签)，因为应用于组件的类名不会传播到父级的 v-gridlayout-slot.

作为替代方案，您可以向所有组件(标签除外)添加一个通用样式名称，并使用此样式设置边距(left、right、bottom ) 到所有组件。 (在下面的示例中，使用粉红色来验证样式是否已应用。)

在这种情况下，输出是这样的:

CSS部分:

.addPadding{
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: pink;
  }

使用的代码:

 setContent(addGridLayout())
  ////
 private GridLayout addGridLayout(){
        // Create a 4 by 4 grid layout.
        GridLayout grid = new GridLayout(4, 4);
        //grid.setSpacing(true);
        grid.addStyleName("example-gridlayout");

// Fill out the first row using the cursor.
        for (int i = 0; i < 4; i++) {
            Label l=new Label("Col " +
                    (grid.getCursorX() + 1));
            grid.addComponent(l);
            grid.setComponentAlignment(l,Alignment.BOTTOM_CENTER);
        }

    // Fill out the first column using coordinates.
        for (int i = 1; i < 4; i++) {
            TextField x=new TextField();
            x.addStyleName("addPadding");
            grid.addComponent(x, 0, i);
        }

    // Fill out the secondcolumn using coordinates.
        for (int i = 1; i < 4; i++) {
            TextField x=new TextField();
            x.addStyleName("addPadding");
            grid.addComponent(x, 1, i);
        }

    // Fill out the third column using coordinates.
        for (int i = 1; i < 4; i++) {
            DateField x=new DateField();
            x.addStyleName("addPadding");
            grid.addComponent(x, 2, i);
        }

    // Fill out the third column using coordinates.
        for (int i = 1; i < 4; i++) {
            ComboBox x=new ComboBox<String>();
            x.addStyleName("addPadding");
            grid.addComponent(x, 3, i);
        }
        return  grid;
    }