Using Pretty Checkbox to replace radio buttons inside matrix questions

[harpsicord86]

Hi there,

I'm looking to use the Pretty Checkbox custom widget on matrix questions only but I can't see any easy way to do this. Can anybody point me in the right direction with this?

Thanks

• surveyjs platform (angular or react or jquery or knockout or vue): jQuery
• surveyjs version: 1.0.20

[andrewtelnov]

@harpsicord86 I guess you are looking something like in this example. However, not for iCheck, but for pretty checkbox. I did not check, but I believe, you should write the code similar to our iCheck support: https://github.com/surveyjs/widgets/blob/master/src/icheck.js We may add pretty checkbox as custom widget into our TODO list. However, I can't promise we will do it soon. Our TODO list is already big enough :)

Thank you, Andrew

[harpsicord86]

@andrewtelnov Thanks for the reply. Yes, the example is exactly what I'm after! I like to keep things consistent where I can in my surveys. I'll have a fiddle with the iCheck code and see what I can come up with. If I get it working, I'll be happy to share it with you :-)

Would be good if you could get Pretty Checkbox integrated if you can, I found out that the iCheck widget at http://icheck.fronteed.com/ hasn't been supported in a while.

Thanks again for your help, Steve

P.S. SurveyJS is looking great! Keep up the good work :+1:

[andrewtelnov]

@harpsicord86 We actually have pretty checkbox as a custom widget. I have forgot about it: https://github.com/surveyjs/widgets/blob/master/src/pretty-checkbox.js

Thank you, Andrew

[harpsicord86]

@andrewtelnov Yes I have been using this as per the custom widget. This works perfectly well with checkboxes and radio buttons but I wanted to use this with matrix questions with radio buttons in them and I wasn't clear on how this could be achieved.

Will the code you directed me to work in that case?

[dmitry-kurmanov]

@harpsicord86, we discussed it with the team, so we will implement this functionality "out of the box" and will create an example on our site.

[dmitry-kurmanov]

@harpsicord86 I'm sorry but after the investigation I've got remeber that pretty checkbox require a certain html markup. Thats why in our custom widget we've totally remove our markup and create a new one. So for supporting matrix, we need to do the same (with rows, dynamic rows etc) and support it in the future. And I can not give any estimation for this now.

What is your use case? May be we could give you a workaround.

[harpsicord86]

@dmitrykurmanov Sorry for the late reply! I'm building a survey about knee pain which uses pretty checkbox for all radiogroups and checkbox lists. I was trying to keep consistency with matrix questions so that the survey doesn't look out of place. Here's an example:

Just to add, I'm running this on a mobile too and I know pretty checkbox supports touch :-)

[dmitry-kurmanov]

@harpsicord86 hello! Could you please tell what theme do you use ? Bootsrtrap or one of our themes? We have a problem with prettycheckbox widget and bootstrap. And with our theme it looks ok: https://plnkr.co/edit/wylixM?p=preview. And we try to implement bootstrrap theme with it.

[harpsicord86]

@dmitrykurmanov I use the Bootstrap theme coupled with a custom them called 'Paper' from Bootswatch.com

[stsiushkevich]

@harpsicord86 We actually have pretty checkbox as a custom widget. I have forgot about it: https://github.com/surveyjs/widgets/blob/master/src/pretty-checkbox.js

Thank you, Andrew

Pretty checkbox doesn't work in matrix (((

[reginaochotzki]

We also desperately need hat-looking checkboxes and radiobuttons. The build in radiobuttons and checkboxes simply cannot be styled properly.

[reginaochotzki]

We are using the react version from surveyjs and normally we are using material-ui widgets. Unfortunately, there is no material-ui support.