Radio buttons pile up on each other when used in inline layouts
I've been facing this issue for some time and i couldn't find a proper way of doing it.
I have a set of options that i want to show as radio buttons in a horizontal manner. And i have to display a text box beside the radio buttons in a single line. So usually, i went for Inline style of layouts. But this ruins the radio buttons as they are piling up on each other masking up the text as below
and if i user, Inline grid triple,
This works properly with bigger browser windows but, the problem occurs when you resize the browser window to smaller size. Any way around this issue to make it take the space it needs for the text irrespective to the window size?
1. Yes. It seems the control is responsive to the browser window resolution and thus ignoring the text length. I guess it has min, max length for the text which exceeds, it is masking it. It is working for small words within the limit( I did not analyze the range yet)
2. Vertical orientation is working fine. But, i need it to be horizontal here
3. I am using OOTB Inline formats for layout and Standard format for radio buttons. So, i think it should be same across skins.
4. There are not many options there for labels except for reserve space and label format. I've tried reserve option and did not see any change. I will try the label formats and will tell you