DataViewList horizontal

The DataViewList shows multiple Forms containing a DataView from top to bottom (vertical). Is it possible to align the forms horizontally, so that they appear next to each other? (with a horizontal scrollbar if needed)
2 answers

The appearance of the DataViewList can be customized in your stylesheet. For instance to align two DataViews next to each other, you could add this to your css:

.fvlFormViewList .mendixFormView {
    float: left;
    width: 50%; /* for two 'columns' */

If you do not want to apply this to all DataViewLists, you should of course apply this to a custom class defined on the DataViewList.

Note that nested DataViews in the DataViewList will also be styled like this. It is safer to also define a custom class on the DataViews inside the forms, and use that class instead of applying it to every mendixFormView inside the DataViewList:

Example selector:

.dataViewList .dataViewListItem

Where 'dataViewList' is the class defined on the DataViewList which should have a column layout, and 'dataViewListItem' is the class defined on the top-level DataView of the forms defined in the form mapping.

Btw: the float should also be cleared to allow content below the DataViewList to be aligned properly.


Thanks Daniel. But if I enter the css, I still get only 1 column that is 50% of the page width. The div's are still aligned vertically.

What I want is every div in the DataViewGrid's content to appear on the right side of the previous one. This way I want to create 'columns' dynamically, and not fixed, such as in a Data Grid