Configurable List Widget: Adjust Field Size

What custom css do I need to add to my jotform to make a field In configurable list widget 10px

Hi Deomid,

Thanks for reaching out to Jotform Support. You can change the font size of the Configurable List widget by injecting the CSS code in your widget below:

/* resize the font size */

.configurable-list-field-label {

   font-size: 10px !important;

}

/* Ends here */ 

To inject the CSS Code in your widget, check out the steps and screencast below:

1. Open your form in Form Builder, click the wand icon of your Configurable List Widget to open the Widget Settings panel.
2. Go to the Custom CSS tab.
3. Paste the CSS Code into the textarea.
4. Click the Update button to save the changes.

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

Hi Deomid,

Sorry about the confusion; can you share with us which field in your configurable list widget you want the field size to be adjusted for?

Once we hear back from you, we'll be able to help you with this.

The col3
...

Hi Deomid,

Are you referring to the Travel Time field? If so, you can use the code below to make the inputted text on it to be 10px.

input.form-number-input.form-textbox.stepper.translatable._3mdrn7jdi._uidset {

font-size: 10px !important;

}

See the screenshot below for the results:

Keep us updated and let us know if you need any more help. 

No. I’m referring to the field.—->>> that’s a static field and I want to made it take up less space.  Not font. Just width.  Thank you.
...

Hi Deomid,

You can use the code below to remove the space of the static field from the form:

.configurable-list-field-wrapper.col3.static-field-selector {

    display: none;

}

.configurable-list-field-wrapper {

    width: 100px !important;

}

See the screenshot for the results:

Reach out again if there’s anything else we can do for you.

I don’t want to remove the Col3.static field size completely. Just want it 10px.

Hi Deomid,

Apologies for the misunderstanding. I checked the form, and it seems you re-ordered the fields. The code below allows you to minimize the field into 10px:

.configurable-list-field-wrapper.col4.static-field-selector {

width: 10px !important;

min-width: 10px !important;

}

See the screenshot below where the white element ti the Col.3static:

Reach out again if there’s anything else we can help you with.

That’s it!! Thank you.
...

Hi Deomid,

I have Moved your new question to a new thread and answered it there.

Thanks for your patience and understanding, we appreciate it.

I have another issue that maybe you can help me with.  On my board
...

Hi Deomid,

I’ve moved your new question about hiding the description on the left side in Card View to a separate thread to keep things organized and avoid confusion. You can check our response here.

Let us know if you have any other questions.