How to edit drop-down field design?

If you're just looking to increase the height of the dropdowns on the submit a request page, you can add the following to the style.css in the standard Copenhagen theme:

.nesty-panel {
  max-height:300px!important;
}

As stated above, the default is 150px

Thank you Chris !  Works great.

I'm also trying to increase the height of the dropdown box that contains a list of forms to choose from.  I checked my style.css file but I don't have a .nesty-panel class.  Does anyone know how I can do this?

Thanks, Chris! That worked perfectly!

Justin,

In order to change the styles for each option you'll need to target the `.nesty-panel li` element:

    .nesty-panel li {
      font-size: 20px;
      padding: 25px 20px !important;
    }

If you want to play with the styles on anything in the panel, you'll need to set a breakpoint on when a subtree modification occurs on the `.nesty-panel` element. Then when it pauses, you can look around in the code for `.nesty-panel` in order to get the exact styling you want.

1) Set breakpoint on `.nesty-panel`


2) Open dropdown and it will pause the code

3) Then you can dig around the structure and test any styling you want

Hey Justin,

Without actually seeing the CSS on your theme, it's a bit tricky to troubleshoot. It's possible you might have something else overriding that value if you have other customizations, or it's possible there's a syntax error preventing it from being read correctly. can you check your CSS file for multiple entries for the .nesty-panel class?

No, they still display but the height of the items is the same as before. My goal is to increase the height but with this code from Dan, nothing changed.

Hi Jessie, when I add the suggested code, I do not see the drop down fields themselves, nor the options within the field, change in height.