How do I increase the size of textboxes used in the Configurable List Widget?

I'd like to match better all the text box and font sizes in the form.

 

The only custom CSS that I'm currently using is:

 

.col1, .col2, .col3, .col4 {

padding: 10px;

font-size: 16px;

}

 

If you want the Text Box fields from inside the Configurable List widget to have the same styling as the ones on your form, please apply this custom CSS to the widget:

input[type="text"] {
border-radius: 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;
background-color: #FFF;
border-color: #545151 #888 #E1E1E1;
border-style: solid;
border-width: 1px;
color: #333;
font-size: 14px;
font-weight: bold;
line-height: 18px;
padding: 8px 4px;
}

It is the same styling used by your other Text Box fields, so the form would end up looking like this:

If you also want the Drop Down fields to look the same as in your form, simply add ", select" into the selector of the custom CSS, so the code would end up looking like this:

input[type="text"], select {
border-radius: 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;
background-color: #FFF;
border-color: #545151 #888 #E1E1E1;
border-style: solid;
border-width: 1px;
color: #333;
font-size: 14px;
font-weight: bold;
line-height: 18px;
padding: 8px 4px;
}

And your Configurable List would end up looking like this:

Please try it out and let us know if you need any further assistance, we are here to help.

Boris,

Thank you for quick response! After adding the custom CSS everything worked except for adding the ", select" to the widget. The dropdown boxes remained smaller. I looked in preferences, but I'm assuming something else is controlling that for the entire form?

How would I go about tracking down what might be doing that?

Also, what would you add to increase the width of the boxes in the widget?

As I check your JotForm, I see that the configurable list widget is displaying correctly at my end.

Could you let us know which browser you are using? Please try opening the form in a different browser and see how it is displaying. If you can provide us with the screenshot of the issue, it would be helpful for us to further investigate the issue.

Thank you! 

Hmm. Interesting. I'm using Chrome on a MacBook. Here is what I'm seeing.

Here it is in Safari

Also, is it possible to apply Boris' custom CSS to individual columns? I'm asking because now that I see how the fields can be increased, I'd like to reduce the size of column 3 in my form so that .col1 and .col2 can be increased in size. 

Thank you again.

Well. I've checked the issue on a Mac emulator and was able to replicate the issue at my end. This seems to be an issue with the browser on Mac OS. In order to display it correctly on Mac OS, you'll set webkit-appearance to none.

However, by using this code in the CSS it'll not be displaying the down arrow on the select dropdown.

This may be resolved by adding additional CSS code to add a background image to the select dropdown.

Please add the following CSS code to the widget in addition to the code provided by our colleague.

select {

min-width: 120px;

-webkit-appearance:none;

background: url('https://shots.jotform.com/kiran/shared/down-arrow.png') no-repeat 105px 8px;

}

It should be now displaying the dropdown as shown below:

 Hope this information helps! 

To answer your other question, Yes. We can apply the CSS code to each column individually by using the column number class and/or the element in the column as shown below.

.col1 {

your CSS code comes here;

}

.col1 input {

your CSS code comes here;

}

If you need any further assistance, please let us know. We will be happy to help. 

Kiran,

Thank you. It works perfectly. Just to be helpful to anyone else who might look at this in the future. Here is a pic and custom CSS that I ended up using based on your and Boris' help.

Thanks again.

.col1, .col2, .col3, .col4 {

padding: 5px;

font-size: 16px;

}

.col1 input[type="text"], select {

border-radius: 4px;

box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

background-color: #FFF;

border-color: #545151 #888 #E1E1E1;

border-style: solid;

border-width: 1px;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 18px;

padding: 8px 4px;

width: 225px;

}

.col2 input[type="text"], select {

border-radius: 4px;

box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

background-color: #FFF;

border-color: #545151 #888 #E1E1E1;

border-style: solid;

border-width: 1px;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 18px;

padding: 8px 4px;

width: 180px;

}

.col3 input[type="text"], select {

border-radius: 4px;

box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

background-color: #FFF;

border-color: #545151 #888 #E1E1E1;

border-style: solid;

border-width: 1px;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 18px;

padding: 8px 4px;

width: 125px;

}

select {

min-width: 120px;

-webkit-appearance:none;

background: url('https://shots.jotform.com/kiran/shared/down-arrow.png') no-repeat 105px 8px;

}

Great! Glad to see that the issue is now resolved for you. A small correction in the code provided above to be done. Since column 1 and 2 are provided with input text box and column 3 is provided with select dropdown, it is not required to have select for .col1 and .col2. In the same way, .col3 is not required to have input text. Also, since we are having separate code for each column, I'm also merging the separated select code with .col3.

Here is the updated CSS code:

.col1, .col2, .col3, .col4 {

padding: 5px;

font-size: 16px;

}

.col1 input[type="text"] {

border-radius: 4px;

box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

background-color: #FFF;

border-color: #545151 #888 #E1E1E1;

border-style: solid;

border-width: 1px;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 18px;

padding: 8px 4px;

width: 225px;

}

.col2 input[type="text"] {

border-radius: 4px;

box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

background-color: #FFF;

border-color: #545151 #888 #E1E1E1;

border-style: solid;

border-width: 1px;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 18px;

padding: 8px 4px;

width: 180px;

}

.col3 select {

border-radius: 4px;

box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

background-color: #FFF;

border-color: #545151 #888 #E1E1E1;

border-style: solid;

border-width: 1px;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 18px;

padding: 8px 4px;

min-width: 120px;

-webkit-appearance:none;

background: url('https://shots.jotform.com/kiran/shared/down-arrow.png') no-repeat 105px 8px;

}

Hope this information helps! 

Ah, makes sense. Thanks again!