Suggestion : internal grid layout for OptionsGroup

Support
#1

Hi

When the list of options available for an OptionsGroup reaches 5, 6 or more, laying all of them line by line is a waste of space. Alternative is to layout horizontally, which gives something similar to the screenshot below.

In our case we would like “Chèque” to be on the same column than “Traite”. This could be managed by OptionsGroup using internally a grid layout, allowing us to specify that the first 3 options should be in column 1 and the 2 others in column 2.

Even better, we could just specify “3 rows max” and then the layout would stack the options from up to down and then left to right, creating columns on the fly as necessary. That gives the same result, but avoids to specify a column for each option.

Mike

option_group_grid_layout

#2

Hi Michael,

You can achieve this behaviour using CSS. We need to set fixed/relative width to OptionsGroup and assign style name.

XML:


<fieldGroup id="fieldGroup"
            datasource="orderDs">
    <column width="250px">
        <field id="title"/>
        <field id="status" generator="generateOptions"/>
    </column>
</fieldGroup>

Generate OptionsGroup component:


public class OrderEdit extends AbstractEditor<Order> {
    @Inject
    private ComponentsFactory componentsFactory;

    public Component generateOptions(Datasource datasource, String fieldId) {
        OptionsGroup component = componentsFactory.createComponent(OptionsGroup.class);
        component.setOptionsEnum(OrderStatus.class);
        // set width
        component.setWidth("250px");
        // our custom style name
        component.setStyleName("my-float-options");
        return component;
    }
}

Then add to your halo-ext.scss (See also: Extending Theme).


.my-float-options .v-radiobutton {
  float: left;
}

That’s it!

options-float

#3

Thanks Yuriy, but it did not work. I tried with all following CSS options and I could not have the radio items aligned column by column.


   float: left;
   vertical-align: middle;
   -webkit-column-count: 3; /* Chrome, Safari, Opera */
   -moz-column-count: 3; /* Firefox */
   column-count: 3;
    display: inline-block;
#4

I’ve illustrated simple floating options without columns. They just wrapped to a new line if an option has width more than available space (You have to set width for the option group). In case you want to apply column-count it should be added for .my-float-options and not for each option.

#5

Sadly, none of the options listed work, including column-count. If you have an idea to align options button in columns, that would be great.

#6

I’ve create a small demo project: GitHub - cuba-labs/optionsgroup-layout: Custom CSS for OptionsGroup

There you will find CSS for floating and columns modes of OptionsGroup:

I hope it will be useful.

options-demo

#7

Exactly what I need. Thank you very much Yuriy !