Need help to restyle Dynamic Dropdown widget

Hi Sir,

I am using a Dynamic Dropdown in my form and I realized that its default style is a bit different compare to the standard Dropdown. I need advise on how to re-style it so that the look & feel of the Dynamic Dropdown will be the same as standard Dropdown. Thanks in advanced!

Hi Nicole_Yam, 

Thanks for reaching out to Jotform Support. You can easily adjust the Dynamic Dropdown by adding a Custom CSS into your widget. Let me walk you through it:

1. First, copy this code:

.select2.select2-container {

    height: 40px;

}

.select2-container--default .select2-selection--single .select2-selection__rendered {

    line-height: unset;

    margin-left: -10px;

}

2. In Form Builder, select your Dynamic Dropdown widget and click the Wand icon.

3. Go to Custom CSS tab and paste the code.

4. Click the Update button to save the changes. That's it.

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

Hi Reymae,

Thanks so much as it is working. However, to further standardize the look & feel of the widget, I try to add in the CSS script below to extend little bit of the Dropdown width but it is not working. I would like to change the border color as same as the Standard Dropdown as well. Kindly advise, thanks in advanced!

   width: 410px;

   max-width: 410px;

Hi Nicole_Yam,

We’ll need a bit of time to look into this. We'll get back to you as soon as we can.

We appreciate your patience and understanding in this.

Hi Nicole_Yam,

We’ll need a bit of time more time on this. We'll get back to you as soon as we can.

We appreciate your patience and understanding in this.

Hi Nicole_Yam, 

To change the border color similar to basic Dropdown element, you can follow the following steps:

1. First, copy this code:

/* Change border color similar to basic Dropdown element - Ticket #25131201 */

.select2-container--default .select2-selection--single { border: 1px solid #b8bdc9 !important; }

/* Ends here */

2. Open your form in Form Builder, scroll down, and select the widget you want to make the change.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

Here is what it will look like once the code is added:

As for adding width to the widget, you can easily do this from the available configuration within the widget, let me walk you through the steps:

1. In Form Builder, click on the element then click on gear icon.

2. At the right panel, find Width, then change to 405px, and the save will automatically be saved.

Here is what it will look like once the setting and code are configured:

Give it a try and let us know if you need more help.

Dear Jessica, that's work exactly what I want! You are a great helper!