Widgets have different radio buttons

  • Profile Image
    davsun55
    Asked on February 08, 2018 at 12:18 AM

    I need the radio buttons in the single choice fields (currently blue circles) to match the radio buttons in the Configurable list widget (grey buttons).

    Can you give me some code to do that, and where would I insert it since there's no option for CSS in the single choice fields.

    Thanks

  • Profile Image
    Ardian_L
    Answered on February 08, 2018 at 05:36 AM

    I have tried to change style of radio buttons inside of configurable list widget, but I was not able to do it.

    I have then checked with my colleagues and they said that this is not possible. If there is anything else that we can do for you, please let us know.

  • Profile Image
    davsun55
    Answered on February 08, 2018 at 05:52 AM

    I actually want to change the style of the list buttons not in the list widget. Is that possible instead?

    Thanks

  • Profile Image
    Ardian_L
    Answered on February 08, 2018 at 07:19 AM

    I am sorry I misunderstood your question. Yes you can change that with this CSS Code:

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

    display: none !important;

    }


    .form-radio-item:not(#foo) label:after{

    display: none !important;

    }


    .form-radio-item:not(#foo) input[type="radio"] {

        display: block !important;

        float: left !important;

    }


    Please follow the instructions on the link below on how to inject CSS Code on the form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you have any other question.

  • Profile Image
    davsun55
    Answered on February 08, 2018 at 08:07 AM

    That's excellent, but the radio buttons are now too far to the left. Can they be moved closer to their labels?

    For example, the 'Accommodation' buttons should come under the 'om' of Accommodation.

    Thanks

  • Profile Image
    Ardian_L
    Answered on February 08, 2018 at 09:17 AM

    Please add this CSS Code on Custom CSS Area:

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

        float: none !important;

    }


    .form-radio-item:not(#foo) input[type="radio"] {

        margin-right: 5px !important;

    }

    Let us know if you have any other question, we are happy to help you.

  • Profile Image
    davsun55
    Answered on February 08, 2018 at 09:35 AM

    Thanks - that's actually moving the text further away from the buttons, whereas I want it closer.

    I've changed the code to be 'margin-left: 20px' and it looks a bit better because the buttons are indented, but they are still a bit too separated from their labels.

    Any other ideas?

    :)

  • Profile Image
    davsun55
    Answered on February 08, 2018 at 09:37 AM

    Also, what does the !important mean in so much of these code snippets?

  • Profile Image
    davsun55
    Answered on February 08, 2018 at 09:39 AM

    Actually - ignore that. It doesn't look right in the designer, but the result is what I need. Thanks. 

    Still interested in '!important.  :)


  • Profile Image
    BJoanna
    Answered on February 08, 2018 at 11:00 AM

    The !important CSS rule is used to override the CSS code that is used for the same element. 

    For example if you added the same CSS code to the same element twice:

    form-radio-item:not(#foo) input[type="radio"] {

        margin-right: 500px ;

    }

    and 

    form-radio-item:not(#foo) input[type="radio"] {

        margin-right: 5px !important;

    }

    The CSS code with !important rule will override the other CSS code. 

    You can also check the explanation here: 

    https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean