Daft Daft - 2 months ago 11
CSS Question

Why can't I get this SLDS picklist to open?

I want to use the SLDS picklist found here.

I'm using several other SLDS elements in my page and they work fine, I have included the necessary SLDS css.

The picklist doesn't actually work in the example they provide so I'm wondering if there is additional configuration required? The documentation does not mention any.

Can anyone tell me what the problem is?


As of my understanding after reading the SLDS documentation the SLDS is just a CSS "framework". For the picklist to work (open) you need to include some Javascript and more specifically the picklist is "opened" by adding a class slds-is-open to the element (picklist). Apply the class to the div stated below.

<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">

I can't really make a demo out of this since the SLDS is so complicated to install but hopefully this can help you.