What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Formating "Visual Multi Select" widget with CSS

    Asked by Kailash108 on January 05, 2016 at 01:00 PM

    How can I format the widget "Visual Multi Select"?

    I don't know so much about CSS.

    I know where to insert the code, but I don't know what the code is.

    What I want to do:

    The whole thing wider (so the text will fit in a single line).

     

    Header text:

    bold, center

    Header background color

     

     

    No white border

     

    Or maybe you can send me the whole CSS code for this widget, so I just can adjust the values? Or can I find it myself somewhere?

    Page URL:
    https://form.jotformeu.com/60042967829363

    Screenshot
    select visual multi select visual css code format find
  • Profile Image

    Answered by victor on January 05, 2016 at 02:50 PM

    You do not require to add CSS code to adjust the width of the widget. If you enter the properties of the widget, you can just increase the width of the widget to your liking.

    Please let us know if this helps.

     

  • Profile Image

    Answered by Kailash108 on January 05, 2016 at 06:25 PM

    Thank you! Great!

    And the rest of my question I could fix myself.
    Just for other readers of this post I will share the code:

     

    To get this layout one need this code:

    .Default .custom-header {
     border: 0px solid #000000;
    background: none;
    font-weight: bold;
    font-size: 120%;
    color: #000000;
    }

    .Default .ms-container .ms-selectable li.ms-elem-selectable, .Default .ms-container .ms-selection li.ms-elem-selection {
     background: #FFFFFF;
     border-bottom: 1px solid ;#000000;
    }

    .Default .ms-container .ms-list {
    border: 0px solid #FFFFFF;
    }

     

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on January 05, 2016 at 10:22 PM

    Thanks a lot for sharing with our users your workaround, we really appreciate it!

    Cheers!