How to make the Checklist widget options to display horizontally?

  • dave158883
    Asked on September 19, 2024 at 3:05 PM

    how do I make a checklist horizontal?

  • Silvano JotForm Support
    Replied on September 19, 2024 at 3:35 PM

    Hi dave158883,

    Thanks for reaching out to Jotform Support. You can inject this CSS code to the Checklist widget:

    ul {
    display: flex;
    border: none !important;
    gap: 5px;
    }
    li {
    border: 1px solid #ccc !important;
    }

    It's easy, to inject CSS code to the widget, let me show you how:

    1. In Form Builder, click on the Checklist Widget and click the Wand Icon.
    2. Now, in the right panel, click on Custom CSS tab.
    3. Finally, paste the CSS code on the textbox and click on Update Widget.

    How to make the Checklist widget options to display horizontally? Image 1 Screenshot 30

    That's it. You may also use Single Choice Field instead of the Checklist widget. Let me show you how:

    1. In Form Builder, click on Add Form Element + and select and drag Single Choice Field to your form.
    2. Now, click the Gear Icon and click on Options tab in the right panel.
    3. Next, switch on Spread To Columns slider.
    4. Finally, set up the Single Choice Field question and options according to your requirement.

    How to make the Checklist widget options to display horizontally? Image 2 Screenshot 41

    That's it. Give it a try and let us know if you have any other questions.

Your Answer