How to edit drop-down field design?

Répondu

12 Commentaires

  • Lightspeed POS Inc
    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-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!

    0
  • Justin

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

    0
  • Jessie Schutz
    Zendesk Team Member

    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
    Zendesk Team Member

    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
  • Lightspeed POS Inc
    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?

    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
    Zendesk Team Member

    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 Chris !  Works great.

     

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk