Vertical twin column select

I’m the UI guy at my company, but I’m new to Vaadin. I have a mock-up I need to follow that requires the functionality of a twin column selector but with the columns up and down instead of left and right.

Is it possible in Vaadin to stack the columns on top of each other (with the arrows in between, pointing up and down), or will I need to make it myself?


I think you may be able to do that with just CSS. The v-select-twincol-options, v-select-twincol-buttons, and v-select-twincol-selections all have “display: inline-block” to stay horizontally. Changing those to “display: block” should make them stack vertically. You will need to make other CSS settings for the elements as well, and also for the sub-elements of the “-buttons” element. The left-right button arrows are letters in the FontAwesome font. You need to change the arrows to different[font=FontAwesome]


[/font] letters in the font - see the FontAwesome enum for the codepoints.