Search code examples
vaadin7

vaadin TwinColSelect not side by side

For some reason my TwinColSelect is not side by side. See below: enter image description here

Has anybody seen this before? I have tried putting it into a HorizontalLayout, etc.

Edit: Here is a better example: enter image description here

It is in a FormLayout, which is inside a Panel, if that helps. This matches some examples I have seen online.

Edit 2: Overall structure ( mimics Dashboard demo app!!! ):

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 )

Edit 3: As stated in the comments, the captions are perfectly positioned. The elements that are broken are the UI elements that allow user interaction, the arrow buttons and the right selection box. So another way to ask this question is: What controls the position of the arrows and the right selection box? Because whatever controls that position is messed up. If I just knew where to look, I could probably figure it out, but I don't know where to start.

Incidentally, I did try setting the width various components to 100%, which also did not work.

If I have to, I will add a button to "show notifications", which will popup a PopupView with this TwinColSelect, letting users do what they need to do there. But I really want to avoid that as it is not user friendly.

Update 4/27/2016: Ok, based on the comments, I can see that setting "?theme=valo" makes it work. Since I started my application with the dashboard demo as my starting point, and since the dashboard uses some version of the dashboard theme already ( dashboard.scss includes "../valo/valo" ), it seems our customized version of the valo theme somehow messes up the TwinColSelect. I say "our customized version of the valo theme" because I literally just added duplicates of scss and css that already existed, I did not really make changes to those files. So my next step is to look at those customized scss files, or put the TwinColSelect into my local dashboard demo ( I was using it to play with features before adding it to my application ). Obviously, if anyone can point me to a possible scss that could cause this type of problem, that would be much appreciated.

Solution

  • Ok, the problem ended up being in the main theme scss. So my theme scss, mobiwms.scss, was copied verbatim from the demo dashboard.scss, which has the following lines:

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

    The key was to comment out or remove the "remove" statements that were invalid now ( because I actually do use the components that the above code "removes" theme information for ). So I simply changed the above to the below and it worked:

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

    I knew it was something like this, just did not know the right question to ask. Maybe this will help someone else.