Reducing overall Line width in 'Configurable List' Widget

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

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!

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

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!

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

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.

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

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.

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

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.