How to customize the Line Radio Buttons with CSS.

  • rbmans
    Asked on December 20, 2017 at 11:06 AM
  • David JotForm Support Manager
    Replied 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 

  • rbmans
    Replied 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

  • David JotForm Support Manager
    Replied 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 Screenshot 10

  • Rob
    Replied on December 20, 2017 at 12:22 PM

    Hi and thanks.

    it worked just fine.


    I love jotfom support :)

  • David JotForm Support Manager
    Replied on December 20, 2017 at 12:24 PM

    You are welcome. :-)

  • rbmans
    Replied on December 20, 2017 at 1: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

  • TREVON
    Replied on December 20, 2017 at 1: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 Screenshot 10

  • rbmans
    Replied on December 20, 2017 at 2: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

  • TREVON
    Replied on December 20, 2017 at 3: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.