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

    Styling Configurable List Widget

    Asked by rsvpfree on February 26, 2015 at 03:36 PM

    I have tried putting 6 fields (day,month,year,hour,minutes,am/pm) into one "Configurable List Widget", and it works. But.........

    using "static" to put some text between the 3rd & 4th fields puts the text there, but I can't see how I can control the appearance of that text (font, size, color, etc) and put some space before and after the text.

    Also, I would ideally like to put some 'blank' space instead of some text, to act as a horizontal field-divider.

    Is there any way I can achieve these two desires???

    configurable list widget styling custom css
  • Profile Image
    JotForm Support

    Answered by Jan on February 26, 2015 at 07:18 PM

    Hi,

    The configurable list widget is divided into table with columns and rows.

    You can add these custom CSS code on the widget to adjust the padding of each column.

    .col1 { padding-left: 0px; padding-right: 0px;}

    .col2 { padding-left: 10px; padding-right: 10px;}

    .col3 { padding-left: 0px; padding-right: 10px;}

    .col4 { padding-left: 0px; padding-right: 10px;}

    .col5 { padding-left: 0px; padding-right: 10px;}

    .col6 { padding-left: 0px; padding-right: 10px;}

    .col7 { padding-left: 0px; padding-right: 10px;}

    .col8 { padding-left: 0px; padding-right: 10px;}

    .col9 { padding-left: 0px; padding-right: 0px;}

     

    Here's a guide on how to add custom CSS on this widget.

    1. Select the Configurable List Widget. Once selected, click the "Wizard" button.

    2. The Configurable List Widget wizard will appear, scroll down and you'll see an area where you can add custom css. Click "Finish" when you're done.

    In regards to the blank space divider, you can use static and then the value should be " ". The value   is equal to 1 blank space.

    This is the result on .col4 :

    Hope this works. Let us know if you need any help.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Jan on February 26, 2015 at 07:21 PM

    There is no option in the toolbar that changes the font text, font size and font colors. You need to use custom CSS code that will target specific elements within the widget. If you need help with that, just tell us how would you like it to be. Thank you!