Recent searches


No recent searches

Customize Form Field Drop Down

Answered


Posted Apr 13, 2021

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

 


0

6

6 comments

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!

0


image avatar

Christopher Stock

Zendesk LuminaryCommunity Moderator

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.

0


It worked! Thank you so much, Chris.

My next question is, how do I adjust the height of the drop-down menu?

0


image avatar

Christopher Stock

Zendesk LuminaryCommunity Moderator

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.

 

0


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

 

0


image avatar

Anne Ronalter

Zendesk Customer Care

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.

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post