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

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 | |
  • 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 Apr 11 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 Apr 11 at 16:43
  • i also suggest you to learn some basic css properties before directly using classes – User6670 Apr 11 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 | |
  • 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 Apr 11 at 13:41
  • @user81642 try wrapping the buttons in the div with class="slds-box slds-theme_default". – rahul gawale Apr 11 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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