I have a dropdown with some options I used in a lightning component so that it is resuable. The problem is that the options are not showing up when i specify the slds-dropdown class. I got this to work in a certain project :

<aura:component>
<!-- global/shared attributes definition -->
<aura:attribute name="options" type="String[]" default="[]" description="The different options that need to be loaded" />
<!-- local attributes definition -->
<aura:attribute name="open" type="boolean" default="false" description="this variable control the visibility of the options" />
<!-- handler definition -->

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" 
            aria-haspopup="true"
            onclick="{!c.toggleDiv}">

        <c:svgIcon svgPath="/resource/SLDS202/assets/icons/utility-sprite/svg/symbols.svg#down"
                        category="utility"
                        size="small"
                        name="down"
                        class="xc-over-slds-icon slds-button__icon slds-button__icon--hint slds-button__icon--small" />

        <div aura:id="xi-target-div" class="xc-hidden slds-dropdown slds-dropdown--right slds-dropdown--actions">
            <ul class="dropdown__list" role="menu">
                <li class="slds-dropdown__item">
                        <a href="" role="menuitem" target="_blank">
                            <p class="slds-truncate">menu 1</p>
                        </a>
                </li> 
                <li class="slds-dropdown__item">
                        <a href="" role="menuitem" target="_blank">
                            <p class="slds-truncate">menu 2</p>
                        </a>
                </li>                   
            </ul>
        </div>

    </button>
</div>

but it is not working when put together in another component. I don't know which is conflicting with which. But the div with the slds-dropdown class is not showing up. Does anyone has any idea ?

For info, even lightning:menu and the aura ui:menu is not showing up :(

  • any console error? – Himanshu Nov 18 '16 at 6:09
  • no, the problem is purely css. when i remove the position:absolute on the slds-dropdown class the menu appears, but it is not appearing over my td but increaing the height of my td and taking up that space – vanessen Nov 18 '16 at 7:04
up vote 2 down vote accepted

Got it to work. The problem was the position attribute defined on the slds-dropdown-trigger class. I just overide it by position: inherit and it works.

So hope this can help someone struggling with this problem.

  • mark this as answer and close this question – Himanshu Nov 18 '16 at 7:05

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.