Adjust the width of the Configurable List widget

How can I adjust the CSS in this Configurable list widget so the date box does not take up so much space?

Hi leashalive89,

Thank you for reaching out to Jotform Support. It is not possible to adjust the height of the table cell for the Date field, since both Date and Activity fields belong to the same Configurable List widget. If you would like to move the date value to the top part of the cell, this can be done with the provided CSS code.

/*Set vertical alignment of date field to top - 14305991*/

[data-qid="62"] > div:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(1) {

vertical-align: top !important;

}

/*Code ends here*/

Here's how to do it:

1. In Form Builder, on the right side of the screen, click on the Paint Roller icon.

2. On the right panel, go to Styles.

3. Scroll down to Inject Custom CSS.

4. Paste the provided CSS code.

Result:

Give it a try and let us know how it goes.

Hi leashalive89,

Thank you for reaching out to Jotform Support. You can adjust the height of the text area since. Please use this code: 

#listContainer .form-textarea {

    height: 40px;

}

Here is how to do it:

1. In Form Builder, click the configurable list widget and click the wand icon.
2. Go to Custom CSS and input the code provided above.
3. Click Update Widget to save the changes.

Give it a try and let us know how it goes.

That change works, but I also want the width of the date box to be smaller, not the height of the box. Similar to this example.

Hi leashalive89,

Thanks for getting back to us. Please try this code:

[data-qid="62"] > div:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(1) {

vertical-align: top !important;

width: 50%;

min-width: 50% !important;

}

Give it a try and let us know how it goes.

That did not change anything to the width of either box.

Hi leashalive89,

Thanks for getting back to us. Please try this code:

[data-qid="62"].table-col

{

  width: 70%;

  min-width:70%;

}

Give it a try and let us know how it goes.