vaadin7 - vaadin TwinColSelect not side by side -

for reason twincolselect not side side. see below:

has seen before? have tried putting horizontallayout, etc.

edit: here better example:

it in formlayout, inside panel, if helps. matches examples have seen online.

edit 2: overall structure ( mimics dashboard demo app!!! ):

mainview - horizontallayout     menu component     content component ( verticalsplitpanel )         header - horizontallayout         content, things 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 ) 

edit 3: stated in comments, captions positioned. elements broken ui elements allow user interaction, arrow buttons , right selection box. way ask question is: controls position of arrows , right selection box? because whatever controls position messed up. if knew look, figure out, don't know start.

incidentally, did try setting width various components 100%, did not work.

if have to, add button "show notifications", popup popupview twincolselect, letting users need there. want avoid not user friendly.

update 4/27/2016: ok, based on comments, can see setting "?theme=valo" makes work. since started application dashboard demo starting point, , since dashboard uses version of dashboard theme ( dashboard.scss includes "../valo/valo" ), seems our customized version of valo theme somehow messes twincolselect. "our customized version of valo theme" because literally added duplicates of scss , css existed, did not make changes files. next step @ customized scss files, or put twincolselect local dashboard demo ( using play features before adding application ). obviously, if can point me possible scss cause type of problem, appreciated.

ok, problem ended being in main theme scss. theme scss, mobiwms.scss, copied verbatim demo dashboard.scss, has following lines:

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

the key comment out or remove "remove" statements invalid ( because use components above code "removes" theme information ). changed above below , worked:

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

i knew this, did not know right question ask. maybe else.