vaadin TwinColSelect не бок о бок

Question

Почему-то мой TwinColSelect не бок о бок. См. Ниже:

Кто-нибудь видел это раньше? Я попытался положить его в HorizontalLayout и т.д.

Edit: Вот лучший пример:

Он находится в FormLayout, который находится внутри панели, если это помогает. Это соответствует некоторым примерам, которые я видел в Интернете.

Edit 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: Как указано в комментариях, заголовки идеально расположен. Элементами, которые были разбиты, являются элементы пользовательского интерфейса, которые позволяют пользователю взаимодействовать, кнопки со стрелками и правый блок выбора. Итак, еще один способ задать этот вопрос: что контролирует положение стрелок и правильную область выбора? Потому что все, что контролирует эту позицию, перепутано. Если бы я только знал, где искать, я, вероятно, мог бы это понять, но я не знаю, с чего начать.

Кстати, я попытался установить ширину различных компонентов на 100%, что тоже не сработало.

Если у меня есть, я добавлю кнопку «показать уведомления», которая выведет PopupView с помощью этого TwinColSelect, позволяя пользователям делать то, что им нужно делать. Но я действительно хочу избежать этого, поскольку он не является дружественным к пользователю.

Обновление 4/27/2016: Хорошо, основываясь на комментариях, я вижу, что настройка «? Theme = valo» заставляет ее работать. Поскольку я начал свое приложение с демонстрацией панели мониторинга в качестве отправной точки, и поскольку на панели мониторинга уже используется некоторая версия темы панели управления (dashboard.scss включает в себя «../valo/valo»), похоже, наша индивидуальная версия темы valo как-то испортил TwinColSelect. Я говорю «наша индивидуальная версия темы valo», потому что я буквально просто добавил дубликаты scss и css, которые уже существовали, я действительно не вносил изменений в эти файлы. Итак, мой следующий шаг - посмотреть на эти настроенные scss-файлы или поместить TwinColSelect в мою демонстрацию локальной панели мониторинга (я использовал ее, чтобы играть с функциями, прежде чем добавлять ее в свое приложение). Очевидно, что если кто-то может указать мне на возможный scss, который может вызвать такой тип проблемы, это было бы высоко оценено.

Answer 1

Хорошо, проблема оказалась в главной теме 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); 

Ключа был закомментировать или удалить «удалить» заявление, которые были признаны недействительными (в настоящее время потому что я действительно использую компоненты, которые приведенный выше код «удаляет» информацию о теме). Так что я просто изменил выше ниже, и она работала:

// 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); 

Я знал, что это было что-то вроде этого, просто не знаю, правильный вопрос, чтобы спросить. Может быть, это поможет кому-то другому.

Answer 2

VerticalLayout pageLayout = new VerticalLayout(); 

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

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

Приведенный выше код работает для меня, попробуйте это.