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

    CSS help with widget layout

    Asked by krochel on February 07, 2017 at 09:31 PM

    I need to align my form boxes better in the configurable list widget.

  • Profile Image

    Answered by Ian on February 08, 2017 at 01:06 AM

    I noticed that you already have custom css for configurable list widget

    I made a little more changes to align it better in one row. Care has been taken to make it responsive for smaller screens

    Copy the existing css code and overwrite the existing code in the widget with the following css code

    Just so you know, the code in orange background is the change I made to existing css code

     

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 20px;

    }

    input{

    width:65px!important;

    }

    td{

    height:40px;

    }

    td.col1, td.col2, td.col3, td.col4 {

        display: inline-block;

        width: 75px;

        float: left;

    }

    th {

        display: none;

    }

    td.col1:before {

        content: "Year";

        display: block;

     

    }

    td.col2:before {

        content: "Make";

        display: block;

     

    }

    td.col3:before {

        content: "Model";

        display: block;

    }

    td.col4:before {

        content: "Vin";

        display: block;

    }

     

    This is how it will appear after applying the CSS code

    Hope this helps.