How to edit drop-down field design?

Hey Justin,

You can edit the dropdown height of fields by editing the style.css  file in Guide. I took a quick look, and the seems the property you're looking at editing is the .nesty-panel class.

A quick test of adding the below to my style.css file yielded larger dropdown ticket fields. Note that you can edit the max-height parameter to something larger or smaller. The default for Zendesk was set to 150px, we changed it to 250px and it seems to look okay.  Bear in mind that this is just a starting point and you probably want to test this out more thoroughly.

.nesty-panel {
 height: auto;
 max-height: 250px;
}

For question 2, that's a bit trickier and will likely require some Javascript to change the page when a given value is selected. It's not something I'm confident whipping up without extensive testing. Sorry I don't have a Zendesk-specific example here for you.

I did a quick look around online to see if I could find some examples for this behaviour. This is one I found, hopefully that would point you in the right direction or another community member can provide some more detail.

Hope that helps!

Thanks, Dan. Unfortunately that code did not work on our Zendesk instance.

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.

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.

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?

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

Thanks, Chris! That worked perfectly!

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?

Thank you @Chris !  Works great.

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