删除 Gridlayout 中第一行和第二行之间的间距答案

【问题标题】：Remove spacing between the first row and second row in the Gridlayout删除 Gridlayout 中第一行和第二行之间的间距
【发布时间】：2019-10-17 12:58:58
【问题描述】：

非常感谢您提前提供的帮助。

让我解释一下问题，

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

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

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

【问题讨论】：

您可以在 vaadin-grid 中设置阴影头的样式。你知道如何设置 vaadin 组件的样式吗？
@Simon，我不知道
但是你知道 CSS 吗？看看文档：vaadin.com/docs/v14/flow/theme/theming-overview.html然后回来问有没有不清楚的地方。
Vaadin 8 使用 GWT 组件，因此如果 Vaadin 8 不幸的是，该链接将无济于事。
没有填充/边距设置可以更改，正如top 标签定义的位置（所以基本上除了通过更改顶部值重新定位元素之外，这个空白空间不能被删除）。在想也许您可以尝试删除setSpacing(true) ，然后将margin-bottom 添加到除标签之一之外的所有组件中。不是一个理想的解决方案，但有点解决方法，如果它有效（还没有检查自己）

标签： vaadin vaadin8

【解决方案1】：

正如我在 cmets 中提到的，组件在 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;
    }

【讨论】：

【解决方案2】：

如果列具有固定宽度，您可以创建 2 个 GridLayout，一个用于标题，一个用于内容。它们都应该没有边距，并且包含它们的布局应该没有间距。

【讨论】：