Question
Last activity: 20 Jan 2016 16:21 EST
How do you customize radio buttons?
We have a custom class for our radio buttons that makes them into a green check and a red x - as apposed to two normal radio buttons. It worked fine in 7.1.5, but in 7.1.7, it causes the repeating grid in which it resides to always choose the first row - i.e., if we check the green check in the third row, it acts like we selected the one in the first row. The same behavior happens if we choose the red x - the other radio button - only the first row gets selected - or the buttons in that row. Again, this worked up until 7.1.9 - or at least in 7.1.5. The code for the custom class is below - it is in a css file.
.offers_wrapper .horizontal-radio .radioTable div span:first-child input[type="radio"]+label{
background: url('webwb/Acceptunchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
}
We have a custom class for our radio buttons that makes them into a green check and a red x - as apposed to two normal radio buttons. It worked fine in 7.1.5, but in 7.1.7, it causes the repeating grid in which it resides to always choose the first row - i.e., if we check the green check in the third row, it acts like we selected the one in the first row. The same behavior happens if we choose the red x - the other radio button - only the first row gets selected - or the buttons in that row. Again, this worked up until 7.1.9 - or at least in 7.1.5. The code for the custom class is below - it is in a css file.
.offers_wrapper .horizontal-radio .radioTable div span:first-child input[type="radio"]+label{
background: url('webwb/Acceptunchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
}
.offers_wrapper .horizontal-radio .radioTable div span input[type="radio"]+label{
background: url('webwb/Declineunchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
margin-left:0px;
}
.offers_wrapper .horizontal-radio .radioTable div span input[type="radio"]:checked+label{
background: url('webwb/Declinechecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
margin-left:0px;
}
.offers_wrapper .horizontal-radio .radioTable div span:first-child input[type="radio"]:checked+label{
background: url('webwb/Acceptchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;
text-indent:-1000em;
margin-left:2px;
}
.offers_wrapper .horizontal-radio .radioTable div span:first-child input[type="radio"]+label{
background: url('webwb/Acceptunchecked.png') no-repeat 0px 0px;
height:32px !important;
padding-bottom:5px !important;
background-size:54px;
width:54px !important;
padding-left:0;
padding-right:0;
display:inline-block;text-indent:-1000em;
margin-left:2px;
}
.offers_wrapper .horizontal-radio .radioTable div span:first-child {padding-right:0;}
.offers_wrapper .horizontal-radio .radioTable input{position:fixed;left:-1000px;}
.offers_wrapper {
height:406px;
}
Accepted Solution
Pegasystems Inc.
US
Hi Sidney Coats
Upon reviewing the corresponding SR, we see that it has been resolved. SA-18663 was created as a result of the investigation. Please reference that if you have the same question.
Pegasystems Inc.
IN
Hi
I would suggest you to run fiddler and check the function getting called and compare the same with out of the box radio button behavior
Please share the difference in fiddler that you can see so that we can comment on that.
Actually, we used Chrome to get this information and found that we were not getting unique ID's on the radio buttons within the repeating grid.
So in 7.1.9 we get <input id=”SelectedAnswerAccept”…> vs <input id=”SelectedAnswerAccept_xxx” in 7.1.9. You will notice that all radio buttons in a grid have the same id in 7.1.9 - which is ok if you don't override the default as it selects the radio button and does not require looking thru the ids.
We were given a work around -
from support. It does seem to fix the issue, however, we still want a fix as while it does make the current code work, we still think we need unique ids for the radio buttons - or any item in a repeating grid.
Without unique ids, it may cause issues later if we want to target specific item in the grid or if other elements get added/substracted. The id is not unique and it basically targets what is closest to the click to find the target (sibling code)
Actually, we used Chrome to get this information and found that we were not getting unique ID's on the radio buttons within the repeating grid.
So in 7.1.9 we get <input id=”SelectedAnswerAccept”…> vs <input id=”SelectedAnswerAccept_xxx” in 7.1.9. You will notice that all radio buttons in a grid have the same id in 7.1.9 - which is ok if you don't override the default as it selects the radio button and does not require looking thru the ids.
We were given a work around -
from support. It does seem to fix the issue, however, we still want a fix as while it does make the current code work, we still think we need unique ids for the radio buttons - or any item in a repeating grid.
Without unique ids, it may cause issues later if we want to target specific item in the grid or if other elements get added/substracted. The id is not unique and it basically targets what is closest to the click to find the target (sibling code)
<input id="SelectedAnswerDecline" type="radio" data-click="..." name="$PpyWorkPage$pOffers$l2$pSelectedAnswer" value="Decline" class="Radio" style="vertical-align: middle;">
<label title="Decline" data-click="..." for="SelectedAnswerDecline" class="rb_ rb_standard radioLabel">Decline</label>
The items in yellow have to change and be completely unique. So if you reference the value in the for="SelectedAnswerDecline" that is not unique. The name attribute is unique.. name="$PpyWorkPage$pOffers$l2$pSelectedAnswer".
A unique id should be supported by the engine as this a work around not a solution.
Pegasystems Inc.
US
Hi Sidney Coats
I see that you have an open SR and that you're currently working with one of our Engineers on it. Once you have received a correct answer, if it can be shared publicly, please update this thread so that if others have the same question, they will know the answer.
Thanks!
Accepted Solution
Pegasystems Inc.
US
Hi Sidney Coats
Upon reviewing the corresponding SR, we see that it has been resolved. SA-18663 was created as a result of the investigation. Please reference that if you have the same question.
Yes - our issue was resolved by the hotfix.
RESOLUTION
Apply HFix-25636.
Note: this hotfix updates the Rule-Utility-Function pzGenerateRadioGroup and thus requires the following additional steps:
- Regenerate the function and library (on the Java tab) for the RUF pzGenerateRadioGroup
- Re-save the sections which directly contain the radio buttons (and are included in the repeat grids)