Customize Form Field Drop Down
AnsweredHi Zendesk,
I was wondering how I can edit the font size and height of the Form Drop Down menu.
Referring to this:
It's too small for my liking. I found a previous post and read that there should be a ".nesty-panel li " section but I can't seem to find this in the css list.
Any help is appreciated! Thanks.
-
Me too! I tried this a couple of weeks ago, probably looking at the same article Sherwyn was, and couldn't find the .nesty either. I would like to expand several of ours but can't locate them on the style sheet.
More detailed instructions/code location would be great!
-
Hi @.../@...,
You're right that the nesty-panel classes don't appear in the standard stylesheet for the Copenhagen theme, they appear to be loaded from elsewhere. You can still override the styling though. Adding
.nesty-panel li {
font-size: 16px;
}to the style.css file will increase the text size in that dropdown.
-
It worked! Thank you so much, Chris.
My next question is, how do I adjust the height of the drop-down menu?
-
Great! To adjust the height of each row in the drop-down you can do the following:
.nesty-panel li {
font-size: 16px;
line-height: 1.5em;
}To adjust the height of the entire panel you'll need something like:
.nesty-panel {
max-height: 500px;
}You'll need to adjust the '500px' to whatever is appropriate for your menu.
-
How can we update/change the dropdown values based on certain condition for the custom dropdown.
For example: I have a custom dropdown with the values
- Product 1 (Asia)
- Product 2 (Europe)
- Product 3 (Asia)
- Product 4 (Asia)
- Product 5 (US)
now if the user has search field where he enters "Asia" then accordingly the dropdown filed show only show those products which are mapped to Asia --> Product 1, Product 3 & 4
-
Hi Amit,
this can be done by creating multiple levels.
Take a look at our article for Organizing drop-down list options with further details on how to go about it.
Please sign in to leave a comment.
6 Comments