Radio button and checkboxes are not being displayed correctly.

Hello,

 

I have a problem with my layout.

 

Not all the radiobuttons a shown correct when I use a template.

Also, the checkboxes are shown like they are radio buttons

https://form.jotformeu.com/72376278768373

Hello podiumverhuur,

I did check your form but could not replicate the issue you have reported. All checkbox question are being displayed correctly in form. Please check the screenshot below:

 

Not all the radiobuttons a shown correct when I use a template.

I am not sure if I have understood your question correctly. I would suggest you to please explain your question a bit more in detail and we will surely help you. You may also like to share a screenshot of the issue and we will take a look. The following guide should help you how to upload image in forum post:  https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

We will wait for your response.

Thank you!

 

Yes I was trying other templates, because it seems that the used templates has some bad css.
Please check again, i put it back

Hello podiumverhuur,

I did check your form and I see what you mean but it is not a bug. That how the template is designed. 

Please inject the following custom css code in your form to resolve the checkbox question issue:

.form-checkbox-item:not(#foo) label:before {

    border: 2px solid #ffffff;

    border-radius: 15% !important;

}

The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Thank you that fixes a part the second problem,but the checkbox before "other" is till wrong.

 

 

Also the first problem still remains.

Almost on the end of the question list you see the questions with the months of the year. but these radio buttons, do not accept de css code.

 

 

I have checked your form and I see what you mean. I will try my best to help you resolve the issues you mentioned. Please give me some time and I will get back to you as soon as possible.

I would like to apologize if I have kept you waiting. I have tried every possible way to change the style of the radio buttons in the Configurable List widget, however, I'm afraid it is not possible based on how it is structured.

As for the checkbox for the "Other" option, please inject the following CSS codes to your form — How-to-Inject-Custom-CSS-Codes

.form-checkbox-other, .form-radio-other {

    visibility : hidden !important;

}

.form-checkbox-other:before {

  content: '';

  position: absolute;

  display: inline-block;

  vertical-align: baseline;

  margin-right: 4px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-border-radius: 15%;

  -moz-border-radius: 15%;

  border-radius: 15%;

  border: 2px solid #fff;

  left: 4px;

  top: 16px;

  width: 18px;

  height: 18px;

  cursor: pointer;

  visibility: visible;

  margin-top: -16px;

}

.form-checkbox-other:checked:after {

    opacity: 1;

    visibility: visible;

}

.form-checkbox-other:after {

    background-color: #ffffff;

    box-shadow: 0 2px 0 0 #ffffff, 2px 2px 0 0 #ffffff, 4px 2px 0 0 #ffffff, 6px 2px 0 0 #ffffff;

    -moz-transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    transform: rotate(-45deg);

}

.form-checkbox-other:after {

    content: '';

    position: absolute;

    z-index: 10;

    display: inline-block;

    opacity: 0;

    top: 8px;

    left: 8px;

    width: 3px;

    height: 3px;

    cursor: pointer;

    visibility: visible;

}

If you have other questions, please feel free to contact us again anytime.

Thank you for is.

Is there a widget that works better and will do the same?

Hello podiumverhuur,

What exactly is your requirement? Do you want to dynamically add a set of radio button questions in form? Unfortunately there is no separate widget which will allow dynamic addition of radio button questions.

I will also check if I can come up with any custom css code to achieve yur requirement in configurable list widget.

Thank you!

I think it worked partly with what you have send to me.The color is a bit darker but that is acceptable and I can not select the radio button now.

The selectbox in the first last question is not completly gone, the infill field is still there.

 

https://form.jotformeu.com/72376278768373

Hello,

I did inject the following custom css code in widget and that seems to have changed the layout of the configurable list radio button:

 

input[type="radio"] {

    display: none;

}

label {

    line-height: 18px;

    margin-left: 28px;

    text-indent: 27px;

}

 

label:before {

    border: 2px solid #ffffff;

}

 

label:before {

    content: '';

    position: absolute;

    display: inline-block;

    vertical-align: baseline;

    margin-right: 4px;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    left: 4px;

    width: 18px;

    height: 18px;

    cursor: pointer;

}

label:before {

    border: 2px solid #575757;

}

label:before {

    background-color: transparent;

    border: 2px solid #828282;

}

 

label:after {

    opacity: 1;

}

label:after {

    background-color: #ffffff;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    cursor: pointer;

}

label:after {

    content: '';

    position: absolute;

    z-index: 10;

    display: inline-block;

    opacity: 0;

    top: 5px;

    left: 9px;

    width: 8px;

    height: 8px;

}

label:after {

    background-color: #ffffff;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    cursor: pointer;

}

 

The issue is that the above custom css code make the radio button not clickable. I will continue to look into this and will get back to you if I am able to find any option. 

Thank you!