展开内容以填充 DIV 并同时在 div 内填充 "stay" - vaadin 7

Question

我有一个 Padding 为 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，Padding为'working'。 - 超级.. 但是

我想让 Table（第一个组件）根据需要占用 space，然后第二个组件 (TabSheet) 应该占用 100%离开了。然而，问题是当我将 VerticalLayout 上的 Expand Ratio 设置为 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) 不再是 'working' - TabSheet 在 "bottom".

扩展出 VerticalLayout

我怎样才能达到预期的效果？ - 听起来是一个非常普遍的问题 - 第一个组件获得第一优先权，第二个组件获得 100% 的剩余内容..

Answer 1

您不应该将 CSS 填充与 VerticalLayout 一起使用，如您所见，这会破坏 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 内填充 "stay" - vaadin 7

Expand content to fill DIV and at the same time "stay" within div - vaadin 7

html

vaadin