vaadin TwinColSelect 不是并排的

Question

出于某种原因，我的 TwinColSelect 不是并排的。见下文：

有人以前看过这个吗？我试过将它放入 HorizontalLayout 等

编辑：这是一个更好的例子：

如果有帮助，它位于 Panel 内的 FormLayout 中。这符合我在网上看到的一些例子。

编辑 2：总体结构（模仿 Dashboard 演示应用！！！）：

MainView - HorizontalLayout
    Menu component
    Content component ( VerticalSplitPanel )
        Header - HorizontalLayout
        Content, where things really go ( CssLayout )
            UsersView ( VerticalLayout )
                 User Header ( HorizontalLayout )
                 User list ( Table )
                 UserForm ( Panel )
                     form ( FormLayout )
                         Various data entry fields ( TextField, ComboBox, etc )
                         notifications selection ( TwinColSelect )
                         save button ( Button )

编辑 3：如评论中所述，字幕位置完美。损坏的元素是允许用户交互的 UI 元素、箭头按钮和右侧选择框。所以问这个问题的另一种方式是：什么控制箭头的位置和正确的选择框？因为控制那个位置的任何东西都搞砸了。如果我知道在哪里看，我可能会弄清楚，但我不知道从哪里开始。

顺便说一句，我确实尝试将各种组件的宽度设置为 100%，但也没有用。

如果必须的话，我会在 "show notifications" 中添加一个按钮，它将弹出一个带有此 TwinColSelect 的 PopupView，让用户可以在那里做他们需要做的事情。但我真的想避免这种情况，因为它对用户不友好。

2016 年 4 月 27 日更新：好的，根据评论，我可以看到设置“？theme = valo”使它起作用。由于我以仪表板演示作为我的起点开始我的应用程序，并且由于仪表板已经使用了某些版本的仪表板主题（ dashboard.scss 包括 "../valo/valo" ），似乎我们的自定义版本valo 主题以某种方式弄乱了 TwinColSelect。我说 "our customized version of the valo theme" 是因为我实际上只是添加了已经存在的 scss 和 css 的副本，我并没有真正对这些文件进行更改。所以我的下一步是查看那些自定义的 scss 文件，或者将 TwinColSelect 放入我的本地仪表板演示中（在将它添加到我的应用程序之前，我用它来玩弄功能）。显然，如果有人能指出可能导致此类问题的 scss，我将不胜感激。

Answer 1

VerticalLayout pageLayout = new VerticalLayout();

FormLayout formLayout = new FormLayout();
pageLayout.addComponent(formLayout);

TwinColSelect twinSelect = new TwinColSelect("Twin");
formLayout.addComponent(twinSelect);

上面的代码对我有用，试试这个。

Answer 2

好的，问题最终出现在主题scss中。所以我的主题 scss mobiwms.scss 是从演示 dashboard.scss 中逐字复制的，它有以下几行：

// Optimize the CSS output
$v-included-components: remove($v-included-components, accordion);
$v-included-components: remove($v-included-components, colorpicker);
$v-included-components: remove($v-included-components, grid);
$v-included-components: remove($v-included-components, popupview);
$v-included-components: remove($v-included-components, progressbar);
$v-included-components: remove($v-included-components, slider);
$v-included-components: remove($v-included-components, splitpanel);
$v-included-components: remove($v-included-components, tree);
$v-included-components: remove($v-included-components, treetable);
$v-included-components: remove($v-included-components, twincolselect);

关键是注释掉或删除现在无效的"remove"语句（因为我确实使用了上述代码"removes"主题信息的组件）。所以我只是将上面的内容更改为下面的内容并且它起作用了：

// Optimize the CSS output
$v-included-components: remove($v-included-components, accordion);
$v-included-components: remove($v-included-components, colorpicker);
$v-included-components: remove($v-included-components, grid);
$v-included-components: remove($v-included-components, popupview);
$v-included-components: remove($v-included-components, progressbar);
$v-included-components: remove($v-included-components, slider);
// $v-included-components: remove($v-included-components, splitpanel);
$v-included-components: remove($v-included-components, tree);
$v-included-components: remove($v-included-components, treetable);
// $v-included-components: remove($v-included-components, twincolselect);

我知道是这样的，只是不知道该问什么问题。也许这会对其他人有所帮助。

vaadin TwinColSelect 不是并排的

vaadin TwinColSelect not side by side

vaadin7