Question

我有一个填充25px的VerticalPanel - 它有一个Table作为第一个组件，TabSheet作为第二个组件。

如果我没有指定扩展比率，则两个组件的自动高度均为50％，如下所示：

<div class="expand">
 <div class="v-slot" style="height:50%"><table>.......</table></div>
 <div class="v-slot" style="height:50%"><tabSheet>.......</tabSheet></div>
</div>

，填充VerticalLayout，填充“正常”。 - 超级..但是

我想让Table（第一个组件）占用所需的空间，然后第二个组件（TabSheet）应该占用剩下的100％。但问题是，当我将VerticalLayout上的Expand Ratio设置为第2个组件的1f setExpandRatio(tabs, 1f)时，HTML变为：

<div class="expand">
 <div class="v-slot"><table>.......</table></div>
 <div class="v-slot" style="height:100%"><tabSheet>.......</tabSheet></div>
</div>

现在，VerticalLayout的Padding（25px）不再“正常工作” - TabSheet在“底部”扩展出VerticalLayout。

如何实现理想的行为？ - 听起来像一个非常常见的问题 - 第一个组件获得第一优先级，第二个组件获得100％的剩余......

Answer 1

您不应该使用VerticalLayout的CSS填充，这会打破Vaadin布局，如您所见。而不是你应该通过说

为布局启用间距或边缘

layout.setSpacing(true);

或

layout.setMargin(true);

如果要修改VerticalLayout的默认Vaadin间距或边距值，可以使用特殊的CSS。

让我们说您的布局的样式名称为mymargins，您可以使用以下CSS控制其边距大小：

.mymargins.v-margin-left   {padding-left:   10px;}
.mymargins.v-margin-right  {padding-right:  20px;}
.mymargins.v-margin-top    {padding-top:    40px;}
.mymargins.v-margin-bottom {padding-bottom: 80px;}

可以使用以下类型的CSS控制VerticalLayout的间距：

.v-vertical > .v-spacing {
   height: 30px;
}

展开内容以填充DIV，同时“停留”在div - vaadin 7中

1 个答案: