0

I am trying to align the button on lightning component to the right but is not working as expected. My component is like below 

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  controller="updateCaseRecord">
    <aura:attribute name="updateCase" type="Case" default="{'sobjectType':'Case'}"/>
    <lightning:button variant="brand" label="Take Ownership" iconPosition="right"  onclick="{!c.updateOwnership}"  />
    <lightning:button variant="brand" label="Close Case" iconPosition="right"  onclick="{!c.updateCaseClose}"  />
</aura:component>

Using the lightning App Builder I placed the component in to the Record page but it is not getting aligned to the right

enter image description here

Even though I have the iconPosition="right" it is not getting right justified. I dont have anything on the Style. How can I achieve this.

Also is there any way to add lightning component in to the list of buttons at the top? I know if I can call the lightning component from the Quick action it can be done, since we have Feed Tracking enabled I cannot use Quick Action as they show in the Feed Tab.

After using slds-float_right

enter image description here

And if I am placing the component above the related list quick links like below

enter image description here

button gets hidden like enter image description here

Improve this question

3 Answers 3

Reset to default
1

Since you used float on the button so they are taken out from the "normal" flow you can set overflow to "hidden" or "auto" in this case like this

<aura:component Controller="peropertystack" implements="force:hasRecordId,force:lightningQuickAction,flexipage:availableForAllPageTypes,lightning:availableForFlowScreens" access="global">
<div style="overflow:auto">
<lightning:button variant="brand" label="Take Ownership" iconPosition="right" class="slds-float_right" onclick="{!c.updateOwnership}"  />
<lightning:button variant="brand" label="Close Case" iconPosition="right" class="slds-float_right" onclick="{!c.updateCaseClose}"  />
</div>
</aura:component>
Improve this answer
3
  • Can you suggest me how to add space between the button I tried to add the class="slds-p-right_x-small" but cannot but two class on the button
    – user81642
    Commented Apr 11, 2020 at 16:20
  • @user81642 you can add as many classes as you want like this <lightning:button variant="brand" label="Take Ownership" class="slds-m-left_x-small slds-float_right" onclick="{!c.updateOwnership}" /> also you would need to use "slds-m-left_x-small" class on your first button
    – User6670
    Commented Apr 11, 2020 at 16:43
  • i also suggest you to learn some basic css properties before directly using classes
    – User6670
    Commented Apr 11, 2020 at 17:03
1

iconPosition describes the position of the icon with respect to the body. Options include left and right. This value defaults to left.

It does not mean the button floats to right. You need to use the SLDS class for it. slds-float_right

<lightning:button variant="brand" label="Close Case" iconPosition="right"  onclick="{!c.updateCaseClose}" class="slds-float_right"/>
<lightning:button variant="brand" label="Take Ownership" iconPosition="right"  onclick="{!c.updateOwnership}" class="slds-float_right"/>
Improve this answer
2
  • Thank you I tried using slds-float_right and added the screen shot above. I want the entire lie to be taken by the component but it gets under the Quick links. Can you please tell me what I am missing here
    – user81642
    Commented Apr 11, 2020 at 13:41
  • @user81642 try wrapping the buttons in the div with class="slds-box slds-theme_default".
    – Rahul Gawale
    Commented Apr 11, 2020 at 14:05
0

i know this is old and an answer has been marked as correct, but I had this issue and found that this article worked for me. https://www.infallibletechie.com/2020/03/how-to-align-lightning-button-in.html

Improve this answer
1
  • While this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
    – identigral
    Commented Nov 18, 2020 at 16:54

You must log in to answer this question.

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