0

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 :(

2
  • any console error?
    – Himanshu
    Nov 18, 2016 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, 2016 at 7:04

1 Answer 1

3

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.

1
  • mark this as answer and close this question
    – Himanshu
    Nov 18, 2016 at 7:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .