Radio slide button is not changing back

  • Profile Image
    movz
    Asked on January 24, 2018 at 06:08 AM

    Changed a radio button into a slide button (adv. designer).

    How come it can change to green, i.e. On or Yes but not back again. Basically means once the user has made their choice they'll be stock or has to refresh the page and fill in the whole form again.

    This method of thinking also applies to this form btw, once I've attached a picture I can't take it off.

    Watch attached video for example 

    My form https://form.jotformeu.com/80164884485366

  • Profile Image
    Adrian
    Answered on January 24, 2018 at 10:31 AM

    That is because that is a "Single Choice" element.

    To be able to turn it off, use the "Multiple Choice" element.

    See DEMO: https://form.jotform.com/80234566736966


    Single Choice elements use Radio Buttons and that is the default behavior in browsers, if there is no other option, you cannot unselect the option you selected.

    Multiple Choice elements use Checkboxes which are optional and can be check or unchecked even when there is just one.

  • Profile Image
    movz
    Answered on January 24, 2018 at 05:59 PM

    Got you, thanks Adrian. Learning all the time so grateful you helping me.

    Also, have tried to look at the css but can't figure it out, what CSS would I need to apply to move the button next to the question text?


    1516834446button.png

  • Profile Image
    Kevin_G
    Answered on January 24, 2018 at 08:27 PM

    Yes, it's possible to achieve that, please inject this CSS code to achieve it: 

    div#cid_16 {

        width: 50%;

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps.

  • Profile Image
    movz
    Answered on January 25, 2018 at 05:39 AM

    Thanks. Can't make it work though.

    Have tried both replacing the 

    #cid_16 {

    }

    with

    div#cid_16 {

        width: 50%;

    }

    and just adding it below but no change1516876763Screen Shot 2018-01-25 at 10.3

  • Profile Image
    Adrian
    Answered on January 25, 2018 at 06:51 AM

    I have added the following CSS to your form:

    #label_16 {

      float: left;

      line-height: 40px;

      width: auto;

      padding-right: 15px;

    }

    Now, it looks like this:

    1516881051Fullscreen_1_25_18__12_50_PM.p


    Let us know if you need further assistance.

  • Profile Image
    movz
    Answered on January 26, 2018 at 04:50 PM

    Thank you it did work. Have since tried to redo this to another form, tried to implement your css but didn't work. What am I doing wrong?

    https://form.jotformeu.com/80256713085355


  • Profile Image
    Kevin_G
    Answered on January 26, 2018 at 05:37 PM

    I can see you have injected the code and affecting the "li" element, please use the code my colleague provided above to affect the label instead, then find the field number, that is placed right after the underscore on the field id: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names 

    Replace the field number of the code my colleague shared with the field number shown on the field properties. 

    You will also need to remove the code you already have affecting the field "21" on your form. 

    I hope this helps. 

  • Profile Image
    movz
    Answered on January 26, 2018 at 07:43 PM

    Thank you.

    Have tried a few times can't get it to work sorry my css knowledge is near zero.

    Deleted the css on field 21, found #label_input_21_0 applied the css given to it.
    Also tried to apply it to .form-checkbox-item label {

    }

    but nothing seems to have changed...

    Pls advice

    1517013753Screen Shot 2018-01-27 at 12.4

  • Profile Image
    Welvin
    Answered on January 26, 2018 at 09:05 PM

    I've fixed the alignment, please check again. I've fixed it here: https://www.jotformeu.com/80256713085355 with the following the Custom CSS:

    div#cid_21 {

        position: relative;

        margin-top: -10px;

        margin-bottom: 20px;

    }


    If something is still wrong, let us know. Please include the browser and device that you are using. 

    If you want to make the inputs 100% width, inject the following custom CSS codes:

    For general input fields:

    .form-input-wide {

        max-width: 100% !important;

    }

    input {

        max-width: 100% !important;

    }

    For column layouts such as the name field:

    .form-line-column {

        width: 100% !important;

    }



  • Profile Image
    movz
    Answered on January 27, 2018 at 08:58 AM

    Thanks Welvin! Think we got side tracked on this one, would like to have the slide button next to the text label as originally mentioned above, I should've made it clearer I'm sorry.

    I got it to work on the original form I was asking about but then I merged that form with another different form which messed things up, and after that I couldn't replicated the css for the slide button on the new merged form  #css virgin

    This is the original form where it worked https://form.jotformeu.com/80164884485366

    and I'd like to have the slide button behave the same here https://form.jotformeu.com/80256713085355



  • Profile Image
    TREVON
    Answered on January 27, 2018 at 12:14 PM

    I have checked and the form 80164884485366 and it seems its deleted however I checked on how the radio button should be displayed. To display the radio as you have described above, you will first need to change the Label Alignment of the radio button as shown below.

    1517073094radio buttons design.gif

    Once the alignment has be setup as shown above then you will inject the following css to you form

    .form-label-left, .form-label-right, .form-label-left.form-label-auto, .form-label-right.form-label-auto {

        width: auto;

    }

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

        margin-bottom: 20px;

        position: relative;

    }

    Once you have injected the above css this i s how the radio field will be will displayed.

    1517073277radio button show.png

    Kindly do let us know if you need further assistance.

  • Profile Image
    movz
    Answered on January 27, 2018 at 12:44 PM

    Yup that worked. Thank you.

    Do I need to leave this in or should it be deleted, it doesn't seem to make a difference if I take it out?

    div#cid_21 {

        position : relative;

        margin-top : -10px;

        margin-bottom : 20px;

    }

  • Profile Image
    movz
    Answered on January 27, 2018 at 12:49 PM

    Actually I take that back. Didn't seem to work other than in Jotform preview?


  • Profile Image
    TREVON
    Answered on January 27, 2018 at 02:39 PM

    Thank you for your feedback.  You should leave the CSS code with #cid_21 and not delete it.

    Kindly do let us know if you need further assistance.