Align SLDS buttons to right

  • I am trying to create a file explorer system, wherein all the folders are iterated and created. I have two buttons beside every folder I need to move those two buttons to complete right. I tried with 'float' and 'align' but none worked.

    Here is the part of my code, please notify me what I need to add or what I am doing wrong:

    <li role="treeitem" aria-level="{!v.ariaPlus}" onclick="{!c.changeGroup}" data-data="{!v.dataID}">
        <div class="slds-tree__item">
            <div id="visible">
                <button class="slds-button slds-button--icon slds-m-right--x-small ">
                    <aura:if isTrue="{!v.hasgroups}">
                        <aura:if isTrue="{!v.svgExpand}">
                            <c:svg xlinkHref="/resource/SLDS203/assets/icons/utility-sprite/svg/symbols.svg#chevrondown" class="slds-button__icon slds-button__icon--small" />
                            <aura:set attribute="else">
                                <c:svg xlinkHref="/resource/SLDS203/assets/icons/utility-sprite/svg/symbols.svg#chevronright" class="slds-button__icon slds-button__icon--small" />
                            </aura:set>
                        </aura:if>
                    </aura:if>
                    <span class="slds-assistive-text">Toggle</span>
                </button>
                {!v.nodename}<!--Folder/Group name-->
            </div>  
            <div id="hidden">
    

                <!--Upload Button-->
                <button class="slds-button slds-button--icon upload" aria-live="assertive" onclick="{!c.modalDocOpen}" >
                    <c:svg ariaHidden="true" class="slds-button__icon" xlinkHref="/resource/slds203/assets/icons/utility-sprite/svg/symbols.svg#add" />
                </button>   
            </div> 
        </div>
        <aura:if isTrue="{!v.hasgroups}">
            <ul class="{!v.expandChild}">
                <aura:iteration items="{!v.groups}" var="Pdoc">
                <c:Folder ariaLevel="{!v.ariaPlus}" dataID="{!Pdoc.Id}" nodename="{!Pdoc.Name}"/> 
                </aura:iteration>
            </ul>
        </aura:if>
    </li>
    

    CSS:

    .THIS #hidden{
       visibility:hidden;
        float:right;
    }
    .THIS .cFolder:hover{
        visibility:visible;
    }
    .THIS #hidden:hover {
        visibility:visible;
    }
    
  • You should be able to use the SLDS Float classes:

    <div id="hidden">
        <div class="slds-float--right">
            <!--Add Folder Button-->
            <button class="slds-button slds-button--icon folder" onclick="{!c.modalFolOpen}" aria-live="assertive">
                <c:svg ariaHidden="true" class="slds-icon--small slds-button__icon" xlinkHref="/resource/slds203/assets/icons/standard-sprite/svg/symbols.svg#folder" />
            </button>
            <!--Upload Button-->
            <button class="slds-button slds-button--icon upload" aria-live="assertive" onclick="{!c.modalDocOpen}" >
                <c:svg ariaHidden="true" class="slds-button__icon" xlinkHref="/resource/slds203/assets/icons/utility-sprite/svg/symbols.svg#add" />
            </button>   
        </div> 
    </div> 
    

    I tried this earlier its still the same. I am unable to move buttons to right with "slds-float--right". Let me know if anyother way it can be achieved. - Thanks!

    @Uranium1989 I'll take a quick look and see if I can figure it out.

    @Uranium1989 I think the CSS you wrote is conflicting with SLDS. Remove the float: right from the CSS?

    I did remove CSS and tried but unfortunately didn't work.

    What I could figure out is if I delete:

    . Then the buttons float to right corner. The problem is the groups/folders listing I am creating is not in order vertical order. They get in diagonal order instead which I am not intended to do. Thanks

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used