check box widget with radio button style

Hello all

Is that possible to design the check box widget to radio button design?


In my case,i have to make the validation check,check box has the validation,

but radio button doesnt have. 

If you know , how to design the check box widget to display as the radio,please let me know.

Thank you in advance.

ei


Hello Ei !!

I tried to achieve what you asked for. Here are some screenshots.

I placed checkboxes with the radio-button class:

In Dev Tools the only style I changed was to set the width as 0. As a comparison I placed radios under checkboxes (see photo below):

...I copied the CSS from dev tools with the width: 0 into my CSS stylesheet of the page in service studio:

 ... and after publishing the checkboxes look the same as radios :) Hope it helps :)

Alternative: Because we don't have client-side validations on Radio buttons we can validate them on server side using mapping and playing with CSS -> setting the class of the Label as 'MandatoryLabel' (if we need them to be mandatory) and placing wrapped in an IF container with the message we want to display to the user (or expression with some text variable assigned in the validation) with the class 'ValidationMessage' and you will achieve the similar result as client-side validations.

Best regards!

Anna :)

Anna Wojdyla wrote:

Hello Ei !!

I tried to achieve what you asked for. Here are some screenshots.

I placed checkboxes with the radio-button class:

In Dev Tools the only style I changed was to set the width as 0. As a comparison I placed radios under checkboxes (see photo below):

...I copied the CSS from dev tools with the width: 0 into my CSS stylesheet of the page in service studio:

 ... and after publishing the checkboxes look the same as radios :) Hope it helps :)

Alternative: Because we don't have client-side validations on Radio buttons we can validate them on server side using mapping and playing with CSS -> setting the class of the Label as 'MandatoryLabel' (if we need them to be mandatory) and placing wrapped in an IF container with the message we want to display to the user (or expression with some text variable assigned in the validation) with the class 'ValidationMessage' and you will achieve the similar result as client-side validations.

Best regards!

Anna :)

Hello Anna 


Thank you for the explanation. I got the Css.

But for the client side validation check , i need more explanation. 

I made the process as you said . It does not work yet. 

i added the button , if none of the radio has not selected , it will show message. 

I  need more explanation for that .File is attached,screen name is "radiovalidation".

Thanks again

Sincerely,

Ei


Solution

Hello Ei !

I created a new screen "RadioValidation2" in your module. Please check the logic I used, I placed a lot of comments in order to help you understand. I hope it solves your problem :) 

Best regards,

Anna

Solution

Anna Wojdyla wrote:

Hello Ei !

I created a new screen "RadioValidation2" in your module. Please check the logic I used, I placed a lot of comments in order to help you understand. I hope it solves your problem :) 

Best regards,

Anna


Hello Anna 

Thank you so much for your kind explanation.