In order to restyle a radio button I added an extra span after it, in the otherwise default Bootstrap structure. This lets me style the radio button with input + span and input:checked + span without using any extra JavaScript to rebuild the default behavior.
To add this extra span in Survey JS I used the widget approach, targeting all radiogroups:
var widget = {
name: 'radiogroup-styling',
isFit: function (question) {
return question.getType() === 'radiogroup';
},
isDefaultRender: true,
afterRender: function(question, el) {
$(el).find('input').after('<span/>');
}
};
This works like a charm, until you click a radio button/change the value. Then the extra span disappears and only the original Survey JS DOM structure remains. I have created a CodePen to show the issue:
http://codepen.io/Wimski/pen/YVzzZW
@WimWidgets hello! This is a bug. We fixed it in 2b8b28ab932a3c0901977247fbad428d861cc2fc. Thanks, as a workaround you can use isDefaultRender: false and render your markup.
When do you expect the fix to be available in a new version through NPM? Because I'd rather wait a little instead of manually rewriting the form structure that was already completely fine.
@WimWidgets , we'll release new version 0.12.8 until the end of the week.
@WimWidgets it is ok for you? You may build current master branch and use it untill the release.
My team is going to make a decision next Monday. If the fix is available as an update through NPM by then and it works as expected, we'll be using the Survey JS front-end in our project.
@WimWidgets we've released v.0.12.8. It is works now. Example pen: http://codepen.io/anon/pen/xdxBdo
@dmitrykurmanov Thank you!