Recent searches
No recent searches
How to edit drop-down field design?
Answered
Posted Oct 05, 2018
Question 1 - How can I edit the line height & font size of a drop-down menu's options (when the drop down menu is expanded) on the request page?
Question 2 - How can I display paragraph text based on which option is selected in a drop-down field?
Thanks in advance!
0
13
13 comments
Dan Ross
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.
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!
0
Justin
Thanks, Dan. Unfortunately that code did not work on our Zendesk instance.
0
Jessie Schutz
Hey Justin!
Can you go into a little more detail about what's happening when you try it?
0
Justin
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.
0
Jessie Schutz
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?
0
Justin
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.
0
Dan Ross
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?
0
Chris
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
1
Justin
Thanks, Chris! That worked perfectly!
0
Jessie Schutz
Thanks for helping out, Chris!
0
Doug Shaner
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?
0
Mark Wiles
Thank you @... ! Works great.
0
Katie Sullivan
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:
As stated above, the default is 150px
0