How to customize the Line Radio Buttons with CSS.

  • Profile Image
    rbmans
    Asked on December 20, 2017 at 11:06 AM
  • Profile Image
    BDAVID
    Answered on December 20, 2017 at 11:41 AM

    What is the form in question? Please also share a screenshot to illustrate the issue you are experiencing with your form: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

  • Profile Image
    rbmans
    Answered on December 20, 2017 at 11:54 AM

    I don't know what happened. Why my request is blank. To make it short, I actually solved it.
    To make it longer, what you see in edit mode, I realized that it sometimes is different from live version. 

    Anyway I have another request. Perhaps I should open another thread, but here it goes.

    I want to change size of the font and height of the "boxes" in widget "Line radio buttons". There are options to do that in the widget but nothing happens. I also tried to change css without success. What am I doing wrong?

    here is a link:
    https://form.jotformeu.com/73532745842360

    /Rob

  • Profile Image
    BDAVID
    Answered on December 20, 2017 at 12:05 PM

    Try inject the CSS code inside the widget as shown on this guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    Please test with this code:

    div.iradio_line-blue.checked{

        font-size: 15px !important;

        font-family: "Comic Sans MS", cursive, sans-serif;

    }

    div.iradio_line-blue{

        font-size: 15px !important;

        font-family: "Comic Sans MS", cursive, sans-serif;

    }

    Result

    1513789482result.png

  • Profile Image
    Rob
    Answered on December 20, 2017 at 12:22 PM

    Hi and thanks.

    it worked just fine.


    I love jotfom support :)

  • Profile Image
    BDAVID
    Answered on December 20, 2017 at 12:24 PM

    You are welcome. :-)

  • Profile Image
    rbmans
    Answered on December 20, 2017 at 01:16 PM

    Then would it be possible to place the options for Line Checkbox in columns?
    Just like you can do when using single choice properties.

    if you look at the form you understand what I mean.

    /Rob

  • Profile Image
    TREVON
    Answered on December 20, 2017 at 01:46 PM

    If by arrangement in columns you mean arrange the questions in column, then this can be done as shown in the demo below.

    1513795504remove columns.gif

  • Profile Image
    rbmans
    Answered on December 20, 2017 at 02:29 PM

    I'm sorry but I think you understood me.

    What I meant was, if it is possible to place the options in the "Line checkbox" widget in at least two columns. Just like you are able to do in the "single choice properties" from the basic form element (the element you show in your demo). 

    /Rob

  • Profile Image
    TREVON
    Answered on December 20, 2017 at 03:09 PM

    I have checked and unfortunately there is no way to make the "Line Checkbox" display in two rows. 

    The other workaround though will mean converting the Line Checkbox and customizing the checkbox to look like the "Line Checkbox" you have customized then align them as I had done it earlier.