Horizontal OptionGroup with Icon

Hello,

I have two questions:
How to display OptionGroup items in horizon?
How to attach icons for OptionGroup items? OptionGroup.setItemIconPropertyId(…) doesn’t work for me.

Thanks,
Watt

You can make an option group horizontal by setting its display mode as inline-block in CSS. See an
on-line example
. Just beware of the word wrap, which may wrap the options unintentionally.

You should be able to set the icons either with the setItemIconPropertyId() or more explicitly with setItemIcon(). This is odd, I can’t get setItemIcon() to work either for OptionGroup, although they work just fine with ComboBox. I’m not sure if this is intentional, but I made a bug report just in case (
#5608
).

Icons may not be visually very good for an OptionGroup, as the radio buttons or check boxes are already graphical elements and it may not be visually good to have another graphical elements beside them.

Hi Marko,

Thank you for your reply. After set the style of OptionGroup, horizontal options works. For Question 2, I might hope it could be fixed in following versions.

Best Regards,
Watt

Hi,

An old thread, but I just released a component called
FlexibleOptionGroup
that provides a way to create a horizontal OptionGroup with icons.

-Henri