Question
Virtusa Consulting Services Pvt. Ltd.
US
Last activity: 28 Sep 2016 3:27 EDT
Radio buttons pile up on each other when used in inline layouts
Hi,
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?
Thanks & Regards,
Goutham
Accepted Solution
Virtusa Consulting Services Pvt. Ltd.
US
Hi Mark/ Ajit,
Thank you both for the solutions. I am have tried both of the solutions given by you. Both of them worked but with some minor gaps.
Mark, after adding the code to my CSS, it certainly did maintain the space it is using for the text
but, on window re-sizing the radio buttons are showing up like below instead of breaking up them into vertical alignment
Ajit, I tried your solution with Mark solution as below which broke the radio buttons into vertical alignment when window is re-sized but, they were are right aligned (i think because of float right)
div.radioTable {
display: inline-block;
}
div.radioTable span {
float: right;
margin-right: 1px;
}
.col-2,
.col-3,
.col-4,
Hi Mark/ Ajit,
Thank you both for the solutions. I am have tried both of the solutions given by you. Both of them worked but with some minor gaps.
Mark, after adding the code to my CSS, it certainly did maintain the space it is using for the text
but, on window re-sizing the radio buttons are showing up like below instead of breaking up them into vertical alignment
Ajit, I tried your solution with Mark solution as below which broke the radio buttons into vertical alignment when window is re-sized but, they were are right aligned (i think because of float right)
div.radioTable {
display: inline-block;
}
div.radioTable span {
float: right;
margin-right: 1px;
}
.col-2,
.col-3,
.col-4,
.col-5 {
width: auto;
}
So, i changed the float:right to float:left and it corrected the alignment
Thank you both of you again for your time and effort.
Regards,
Goutham
Pegasystems Inc.
US
Hi Goutham
1. Is this specific to the length of the text used ?
2. Does the issue happen when you use vertical orientation for the radio buttons as well ( You can set this on the Presentation tab)
3. Have you used other skin , is the issue reproducible across skins ?
3. Also, try playing around with the" Label settings " in the "Presentation" tab .
I'll check whether I can reproduce the issue in house. What version of Pega are you on?
Virtusa Consulting Services Pvt. Ltd.
US
Hi Krithigassree,
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
Thanks & Regards,
Goutham
Pegasystems Inc.
IN
Hello Goutham,
Could you please share the CSS style being applied to these radio buttons? Also, do share the configuration details of the concerned section.
Virtusa Consulting Services Pvt. Ltd.
US
Hi Ajit,
I am using Standard style for the radio buttons. Below is the screenshot for the field properties presentation tab.
Thanks & Regards,
Goutham
Virtusa Consulting Services Pvt. Ltd.
US
Yes Sathish,
I have tried wrap text. But, it is working only to some extent. Please look at the below screenshot
still there is a overlap and its not looking good.
Pegasystems Inc.
IN
Hello Goutham,
Thanks for the clarification.
I am able to reproduce the issue and found a workaround to address the issue.
Suggested Solution:- you may use the "Float" and "Margin-right" attributes to address the reported issue.
E.g:-
.SampleClass {
float: right;
margin-right: 1px;
}
Please test the above suggestion and get back to us with the outcome. Meanwhile, I will check again if we can achieve the same kind off functionality using core PRPC features.
Thanks!!
Pegasystems Inc.
US
Setting an "inline" width to accommodate the size of the labels may also help. However this may not be guard rails compliant. Sathish Senthil is this a bug ?
Pegasystems Inc.
US
Try adding the following to a CSS text file rule in your skin. I typically add this to every project to fix the behavior you're seeing.
/**** fix radio buttons & checkboxes to work better on mobile and desktop ****/
div.radioTable {
display: inline-block;
}
div.radioTable span {
display: inline;
padding-right: 5px;
}
.col-2,
.col-3,
.col-4,
.col-5 {
width: auto;
}
Accepted Solution
Virtusa Consulting Services Pvt. Ltd.
US
Hi Mark/ Ajit,
Thank you both for the solutions. I am have tried both of the solutions given by you. Both of them worked but with some minor gaps.
Mark, after adding the code to my CSS, it certainly did maintain the space it is using for the text
but, on window re-sizing the radio buttons are showing up like below instead of breaking up them into vertical alignment
Ajit, I tried your solution with Mark solution as below which broke the radio buttons into vertical alignment when window is re-sized but, they were are right aligned (i think because of float right)
div.radioTable {
display: inline-block;
}
div.radioTable span {
float: right;
margin-right: 1px;
}
.col-2,
.col-3,
.col-4,
Hi Mark/ Ajit,
Thank you both for the solutions. I am have tried both of the solutions given by you. Both of them worked but with some minor gaps.
Mark, after adding the code to my CSS, it certainly did maintain the space it is using for the text
but, on window re-sizing the radio buttons are showing up like below instead of breaking up them into vertical alignment
Ajit, I tried your solution with Mark solution as below which broke the radio buttons into vertical alignment when window is re-sized but, they were are right aligned (i think because of float right)
div.radioTable {
display: inline-block;
}
div.radioTable span {
float: right;
margin-right: 1px;
}
.col-2,
.col-3,
.col-4,
.col-5 {
width: auto;
}
So, i changed the float:right to float:left and it corrected the alignment
Thank you both of you again for your time and effort.
Regards,
Goutham