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

    Reducing overall Line width in 'Configurable List' Widget

    Asked by designhanddemo on August 10, 2015 at 02:31 AM

    Jotformers

    Help Please..... 

    Judging by this forum help with custom CSS code to reduce column width in ‘Configurable List’ is common so clearly I am clearly not alone in seeking assistance.

     

    My requirement is to compress in to one line the following 6 column items followed by the + symbol as shown below. 

    Date, Dropdown, Text Box, Text Box, Dropdown, Textarea.  + 

    To achieve this will require each widget being reduced in size and spacing between each minimised.

    I can see if I minimise the title and details for the Dropdown widget this controls width but not the Text Box and Text Area widgets.

    The extreme width of the Date widget makes it the obvious item for compressing by abbreviating months to 3 letters and years to 2 digits ?  Is this possible (eg as in Mini Date Picker) ?

    I point viewers to the url of my form setup which is clearly too wide.
    http://www.jotform.com//?formID=52192311030842

    Thanking supportive Jotformers in anticipation.

     

    Peter

    Page URL:
    http://www.jotform.com//?formID=52192311030842

    items configurable widget configurable reducing
  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 10, 2015 at 04:43 AM

    Hello Peter,

    The extreme width of the Date widget makes it the obvious item for compressing by abbreviating months to 3 letters and years to 2 digits ?  Is this possible (eg as in Mini Date Picker) ?

    Unfortunately it is currently not possible to achieve your requirement. It is not possible to add any other form fields inside the configurable list widget.

    All the fields of the configurable list widget can be customized. Please use the following custom css code in your widget to change the width / height:

    Textbox:

    input[type=text] {

        width: 75px;

    }

     

    Date:

    Day

    select.d {

        width: 39px;

    }

    Month:

    select.m {

        width: 51px;

    }

    Year:

    select.y {

        width: 56px;

    }

     

    Textarea:

    textarea {

        width: 150px;

        height: 40px;

    }

    Hope this helps.

    Do get back to us how you want to adjust the width of the columns/fields and we will surely help you.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by designhanddemo on August 10, 2015 at 07:04 AM

    Ashwin

    Thanks for prompt response. I have attempted to inject css code you supplied but not working for me. Can you upload it directly to the url or can you give me a heads up on what I might do to activate.  Cheers Peter

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 10, 2015 at 08:56 AM

    Hello Peter,

    Please accept my apology. I did check the widget you have added in your form and found few css code so I thought you were aware where to upload the css code. I should have explain you how to inject the custom css code in widget.

    Please check the screenshot below where to add the custom css code in configurable list widget:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by designhanddemo on August 10, 2015 at 07:18 PM

    Ashwin

    That works great thank you.

    One further option.  

    Can you kindly show me how we might present this form over 2 lines as per the setting below.

    Date, Dropdown, 

    Text Box, Text Box, Dropdown, Textarea.  + 

     

    Thanking you

    Peter

  • Profile Image
    JotForm Support

    Answered by Boris on August 11, 2015 at 12:08 AM

    This is a little harder to achieve, Peter, as the Configurable List widget is using a table element to display its content, and this is happening inside of an iFrame. Table allows it to seamlessly add as many rows as we need, but it has styling constraints.

    We can achieve having the fields the way you have described by adding the following Custom CSS to your widget:

    th {
        display: none;
    }
    td.col2, td.col3, td.col4, td.col5, td.col6 {
        display: block;
        position: relative;
    }
    .col2 {
        left: 2px;
        top: 0px;
    }
    .col3 {
        left: -169px;
        top: 0px;
    }
    .col4 {
        left: -80px;
        top: -40px;
    }
    .col5 {
        left: 2px;
        top: -80px;
    }
    .col6 {
        left: 90px;
        top: -120px;
    }
    tr > td:before {
        font-weight: bold;
        display: block;
    }
    .col1:before {
        content:"Date 1";
    }
    .col2:before {
        content:"Drop down 2";
    }
    .col3:before {
        content:"Text Box 3";
    }
    .col4:before {
        content:"Text Box 4";
    }
    .col5:before {
        content:"Drop down 5";
    }
    .col6:before {
        content:"Text Area 6";
    }

    As it is a table, we needed to break some of its table-like properties, and hide the table headings. Then, we are using the :before tags to visually re-create table headings with CSS. We also need to custom position each table cell to where we want it to appear.

    You can take a look at a demo form with the above codes applied to its Configurable List widget, here:

    http://www.jotformpro.com/form/52219322377959

     

    It also requires us to inject some CSS into the form itself, in order to allow the widget to utilize the space it needs:

    #cid_10, #customFieldFrame_10 { width: 100% !important; }

    I hope this helps.

  • Profile Image

    Answered by designhanddemo on August 14, 2015 at 09:19 AM

    Hello

    http://www.jotformpro.com/form/52219322377959

    I want to change the subject titles in this customised widget but unable to do so using the normal channels. Can you give me a heads up on what to do ?

     Cheers Peter

  • Profile Image
    JotForm Support

    Answered by david on August 14, 2015 at 12:05 PM

    In your widget, the labels are added in the CSS, overriding the regular labels.  You would need to change them in the Custom CSS section of the widget:

    Change those to the labels you would like and you should be all set.

    If you have any further questions, let us know and we will be happy to help.

  • Profile Image

    Answered by designhanddemo on August 14, 2015 at 06:05 PM

    Form Corrupting when Cloning

    http://www.jotformpro.com/form/52219322377959

    The above form looks great but when I clone it becomes corrupted as below. 

    http://www.jotform.com//?formID=52256465009859

    Another problem is I am unable to change titles in the Wizard edit form but I can change items within the two dropdowns.

    Would also like the + Add symbol relocated immediately up below the form. 

    Your asssistance will be appreciated

    Peter

  • Profile Image
    JotForm Support

    Answered by Boris on August 14, 2015 at 07:38 PM

    I'm afraid that you have provided us the link to your instance of Form Builder for that form - a link specific to when you are editing your own form. As such, we are unable to view your following link to see how it may be corrupt:

    http://www.jotform.com//?formID=52256465009859

    This is the cloned form as we can see it: http://www.jotform.co/form/52256465009859 , and it displays without any issues here.

    When it comes to changing titles directly from the Wizard, as described by our colleague David above, you need to change it in the Custom CSS section.

    This is because the Configurable List widget is a table, inside an iFrame on your form. Being a table is what allows it to add new rows / lines so easily, but being a table - it makes it very hard to change its appearance. The only way to force a table display one of its rows over two or more lines is by using the kind of CSS provided above, which has its restrictions.

    As we are using special Custom CSS on this table, the column names (the titles) need to be changed through the CSS code.

    The .col1:before { content:"Date 1"; } is setting the title of your first column, .col2:before of your second column, and so on.

    To move the + Add button directly under the other fields, you can try adding this to the bottom of Custom CSS of the Configurable List widget:

    .add {
        margin-top: -90px;
        position: absolute;
    }

    Let us know if we can assist you further, and we will be happy to help.