Reducing overall Line width in 'Configurable List' Widget

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

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.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

designhanddemo

Asked 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

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!

designhanddemo

Answered 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

JotForm Support

ashwin_d

Answered 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!

designhanddemo

Answered 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

Boris

Answered 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:

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:

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

Boris

Answered 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:

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.