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

    Changing the layout of configurable list widget

    Asked by jodtours on June 05, 2015 at 07:02 PM

    Hello this is how it is now

     

    This is how I want it to be

     

    I hope someone can help me with the css code.

    Thank you so much.  New to Jotform and liking it very much so far.

     

     

     

    Page URL:
    http://form.jotform.ca/form/51527889692271

    layout configurable list list widget configurable
  • Profile Image
    JotForm Support

    Answered by Jan on June 06, 2015 at 12:27 AM

    Based on the screenshot, you would like to to separate the passport no. field, issuing country and date of expiry on another row? Am I right?

    Unfortunately, this configurable list widget are using table elements. If the widget is too wide, you can only narrow it so it will fit in your form.

    Please confirm if you want to just decrease the width of each column so it will fit in your form. Thank you.

  • Profile Image

    Answered by jodtours on June 06, 2015 at 07:40 AM

    Thank you for your prompt response.  Even if we decrease the width of the columns, I do not think they will fit on one line.   There are 7 columns and the date columns take a lot of space.

    Ideally, I would like to have 2 rows as in the screen shot.

    Thanks again.

     

  • Profile Image
    JotForm Support

    Answered by Jan on June 06, 2015 at 10:50 AM

    You can do that through the use of CSS. But please take note that if you do this, the widget field will become very complicated. I cloned your form and then customize the CSS of the widget. Please check this demo form. Take note that the header will be just text and not a column with a background color.

    1. Click the "Wizard Icon".

    2. Scroll down on the "Custom CSS", erase what's on the custom CSS.

    3. Add these custom CSS code.

    #list > tbody > tr:first-child {

        display: none;

    }

    td.col1:before {

         content: "Surname*";

         display: block;

    }

    td.col2:before {

         content: "Given Names*";

         display: block;

    }

    td.col3:before {

         content: "Sex*";

         display: block;

    }

    td.col4:before {

         content: "Date of Birth*";

         display: block;

    }

    td.col5:before {

         content: "Passport No.*";

         display: block;

    }

    td.col6:before {

         content: "Issuing Coutry*";

         display: block;

    }

    td.col7:before {

         content: "Date of Expiry*";

         display: block;

    }

    td.col5 {

         float: left;

         left: -500px;

         position: relative;

         top: 70px;

    }

    td.col6 {

         float: left;

         left: -373px;

         position: relative;

         top: 32px;

    }

    td.col7 {

        float: left;

        left: -245px;

        position: relative;

        top: -8px;

    }

    tr {

         height: 110px;

    }

     

    If you need more than this, then you will need to just download the full form source code and edit the HTML or CSS or hire a developer to achieve what you want.

    Thank you.

  • Profile Image

    Answered by jodtours on June 08, 2015 at 07:11 PM

    Thank you I will try that.  However my form has disappeared !!!  Not a big deal, I will rebuid it.

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on June 08, 2015 at 08:26 PM

    Thank you for updating us. 

    Contact us again anytime should you need further assistance.

     

    Regards,

  • Profile Image

    Answered by jodtours on June 09, 2015 at 12:37 AM

    This is working, however I no longer have the option to remove - a line in the list after adding extra lines.  Thank you again. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 09, 2015 at 03:05 AM

    Hi jodtours, 

    Can you please try to add this custom CSS code to the widget so that the delete button for each line will be displayed? 

    td.col8.buttonsColumn {

      float: left;

      left: 0px;

      position: relative;

      top: -50px;

    }

     

    Do let us know if you need further assistance.

     

    Regards.

  • Profile Image

    Answered by jodtours on June 09, 2015 at 12:41 PM

    Thank you.  This works perfect.  I am now doing some testing and the configurable list does not render well on firefox.  Seems to work fine on IE and Chrome. Here is screenshot. 

    Help much appreciated.

     

  • Profile Image

    Answered by Carina on June 09, 2015 at 01:51 PM

    I will make further tests and will get back to you as soon as I have more details.

    Let us know if we can assist you further.   

  • Profile Image

    Answered by jodtours on June 09, 2015 at 05:24 PM

    Thank you.

  • Profile Image

    Answered by jodtours on June 09, 2015 at 07:20 PM

    I have now just found another issue.  The calendar pop up does not display properly.

    Help !!

  • Profile Image

    Answered by Carina on June 09, 2015 at 08:19 PM

    We are almost there:

    The first calendar is behind content I will try to bring it to the front.

    You can clone the demo form:

    http://form.jotformpro.com/form/51597190980970? 

     

    Let us know if we can assist you further.