0

I have this alignment issue with the next button I have at the bottom, I am not sure how to align inside the box. The same code works perfectly in another scenario, but it had a smaller text in the middle. enter image description here Could someone point out what I am doing wrong in this html?

<template>
    <lightning-card>
        <lightning-input slot="actions" class="contactType" label="Contact Type" type="toggle"
            checked={contactTypeToggle} onchange={handleContactTypeToggleChange} message-toggle-inactive="Call"
            message-toggle-active="Chat"></lightning-input>
        <div class="slds-align_absolute-center">
            <lightning-icon icon-name="standard:case" size="large"></lightning-icon>
        </div>
        <template if:false={caseRecordIdExists}>
            <div class="slds-align_absolute-center slds-var-p-around_medium">This flow will help you create a case in
                Salesforce for this contact. Please click Next to begin.</div>
        </template>
        <template if:true={caseRecordIdExists}>
            <div class=slds-var-p-around_large>
                <lightning-formatted-rich-text value={updateCaseMessage} variant="label-hidden">
                </lightning-formatted-rich-text>
            </div>
        </template>
        <template if:true={contactTypeToggle}>
            <div align="center">
                <lightning-input class=" chatId slds-align_absolute-center slds-var-p-around_small" required
                    message-when-value-missing="Chat ID field is required" variant="label-hidden"
                    placeholder="Enter Chat ID" type="text" onchange={handleChatIdValue}></lightning-input>
            </div>
        </template>
        <div class="slds-var-m-top_small" slot="footer">
            <lightning-button class="slds-float_right" label="Next" title="Next" variant="brand"
                onclick={handleNextNavigation}>
            </lightning-button>
        </div>
    </lightning-card>
</template>

2 Answers 2

0

If you want the parent of the floated element to contain the floats, add the .slds-clearfix class to the parent.

Add the class to the footer div as shown below:

<div class="slds-clearfix slds-var-m-top_small" slot="footer">
    <lightning-button class="slds-float_right" label="Next" title="Next" variant="brand"
                onclick={handleNextNavigation}>
    </lightning-button>
</div>

Refer documentation here

1
  • Thanks Hemant, thanks for the easy fix solution. Jul 7, 2021 at 18:12
0

Remove the float right and make sure that the slds-var-m-top_small is not pushing your element out of boundaries.

Additionally, consider using lightning-layout and the pull-to-boundary property to align certain elements at the edge of the container.

Another option would be to use the card's footer slot to add action buttons at the bottom of the lightning card, and use lightning-layout and layout-items to adjust the position of your buttons

1
  • Thanks @glls, going ahead with Hemants answer as it was super easy to implement. Jul 7, 2021 at 18:13

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.