• Dan Ross

  • October 19, 2018 21:09

  Community Moderator

  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-panelclass.

  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!

• Justin

  • October 24, 2018 14:57

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

• Jessie Schutz

  • October 24, 2018 19:25

  Zendesk Customer Care

  Hey Justin!

  Can you go into a little more detail about what's happening when you try it?

• Justin

  • October 25, 2018 18:02

  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.

• Jessie Schutz

  • October 25, 2018 21:35

  Zendesk Customer Care

  Hey Justin!

  So you're saying that when you change the code as Dan showed you, the dropdown disappear completely?

  Can you post a screen cap of your code so we can take a look?

• Justin

  • October 25, 2018 22:06

  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.

• Dan Ross

  • October 26, 2018 03:37

  Community Moderator

  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?

• Chris

  • October 26, 2018 06:10

  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
  
  
  
  

• Justin

  • October 26, 2018 16:36

  Thanks, Chris! That worked perfectly!

• Jessie Schutz

  • October 29, 2018 19:55

  Zendesk Customer Care

  Thanks for helping out, Chris!

• Doug Shaner

  • January 21, 2021 13:26

  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?

• Mark Wiles

  • June 21, 2021 13:41

  Thank you@...! Works great.

• Katie Sullivan

  • June 21, 2023 21:06

  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

Pleasesign into leave a comment.