function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Francesca Ribezzi 2Francesca Ribezzi 2 

How to align vertically your items in a dropdown list?

Hi Guys! I've been trying really hard to sort this out but i can't! As soon as I hover my mouse upon "Menu Item", the list items contained in <aura:iteration> align horizontally to each other instead of vertically.
Can anyone help me with this?
Thank you so much :-)
<nav class="slds-context-bar__secondary" role="navigation">
                <ul class="slds-grid">
                    <li class="slds-context-bar__item">
                  
                    </li>
                    
        
                    <li  class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_hover">
                        <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Menu Item">
                            <span class="slds-truncate" title="Menu Item">Menu Item</span>
                        </a>
                        <div class="slds-context-bar__icon-action slds-p-left_none">

                        </div>
                        <div class="slds-dropdown slds-dropdown_right">
                            <ul class="slds-dropdown__list" role="menu">
                                <li class="slds-dropdown__item" role="presentation">
                                    <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                                        
                                    </a>
                                </li>
                                
                                <li class="slds-dropdown__item" role="presentation">
                                    <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                                        <span style="color: black;text-decoration-color: blak;" class="slds-truncate" title="Menu Item One">
                                            <aura:iteration items="{!v.sale}" var="sala">
                                                {!sala.Name}
                                            </aura:iteration></span>
                                    </a>
                                </li>

 
Best Answer chosen by Francesca Ribezzi 2
Ashif KhanAshif Khan
Hii Francesca​

 

    
    <nav class="slds-context-bar__secondary" role="navigation">
        <ul class="slds-grid">
            <li class="slds-context-bar__item">
                
            </li>
            
            
            <li  class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_hover">
                <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Menu Item">
                    <span class="slds-truncate" title="Menu Item">Menu Item</span>
                </a>
                <div class="slds-context-bar__icon-action slds-p-left_none">
                    
                </div>
                <div class="slds-dropdown slds-dropdown_right">
                    <ul class="slds-dropdown__list" role="menu">
                        <aura:iteration items="{!v.sale}" var="sala">
                            <li class="slds-dropdown__item" role="presentation">
                                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                                    {!sala.Name}
                                </a>
                            </li>
                        </aura:iteration>
                        
                    </ul>
                </div>
            </li>
        </ul></nav>


I hope this is your requirement

Regards
Ashif
 

All Answers

Ashif KhanAshif Khan
Hii Francesca​

 

    
    <nav class="slds-context-bar__secondary" role="navigation">
        <ul class="slds-grid">
            <li class="slds-context-bar__item">
                
            </li>
            
            
            <li  class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_hover">
                <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Menu Item">
                    <span class="slds-truncate" title="Menu Item">Menu Item</span>
                </a>
                <div class="slds-context-bar__icon-action slds-p-left_none">
                    
                </div>
                <div class="slds-dropdown slds-dropdown_right">
                    <ul class="slds-dropdown__list" role="menu">
                        <aura:iteration items="{!v.sale}" var="sala">
                            <li class="slds-dropdown__item" role="presentation">
                                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                                    {!sala.Name}
                                </a>
                            </li>
                        </aura:iteration>
                        
                    </ul>
                </div>
            </li>
        </ul></nav>


I hope this is your requirement

Regards
Ashif
 
This was selected as the best answer
Francesca Ribezzi 2Francesca Ribezzi 2

Thank you very much! It worked!!!

I've got another issue though..  I don't get why my console.log sala.Name results "undefined". 

can you sort this out, please? 

Thank you so much! :-)

    <aura:attribute name="sale" type="Sala__c[]"/>
    <aura:attribute name="sala" type="Sala__c"/>

<aura:iteration items="{!v.sale}" var="sala">
                                        <li  class="slds-dropdown__item" role="presentation">
                                            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                                                <span id="{!sala}" style="color: black;" class="slds-truncate" title="{!sala.Name}" onclick="{!c.onChange}" >  
                                                    {!sala.Name}
                                                </span>
                                            </a>
                                        </li>
                                    </aura:iteration>  


    onChange : function(component, event, helper){

        var sala = event.target.id; 
        component.set("v.sala", sala);
        console.log("sala " + sala.Name);
     
...