0

I have this lightning layout and it's align end, but I need when it's mobile, the align need to be center and width 100%. I told about use this css:

"@media screen and (max-width: 480px){}"

But I don't know if it's possible to edit an atribute like "horizontal-align", so, I also tried to align with css only but I didn't succeeded yet. How do this?

<lightning-layout horizontal-align="end">
                <div>
                    <lightning-layout-item size="12" medium-device-size="4" padding="around-medium">
                        <lightning-button variant="base" label="Cancel" onclick={cancel}></lightning-button>
                    </lightning-layout-item>
                    <lightning-layout-item size="12" medium-device-size="8" padding="around-medium">
                        <lightning-button variant="brand" label="Proceed" onclick={proceed} disabled={disabled}></lightning-button>
                    </lightning-layout-item>
                </div>
            </lightning-layout>
Improve this question

1 Answer 1

Reset to default
1

Yes, you can use media queries to alter the layout, but since we can't change custom component properties like we can normal properties, we'll just have to make two copies; one for the smaller view, and one for the larger view:

<template>
    <lightning-layout horizontal-align="end" class="desktopButtons">
        <lightning-layout-item>
            <lightning-button-group>
                <lightning-button class="slds-p-horizontal_medium" variant="base" label="Cancel" onclick={cancel}>
                </lightning-button>
                <lightning-button class="slds-p-horizontal_medium" variant="brand" label="Proceed" onclick={proceed}
                    disabled={disabled}>
                </lightning-button>
            </lightning-button-group>
        </lightning-layout-item>
    </lightning-layout>
    <lightning-layout class="mobileButtons" horizontal-align="center" pull-to-boundary="small">
        <lightning-layout-item size="6">
            <lightning-button stretch variant="base" label="Cancel" onclick={cancel}>
            </lightning-button>
        </lightning-layout-item>
        <lightning-layout-item size="6">
            <lightning-button stretch variant="brand" label="Proceed" onclick={proceed} disabled={disabled}>
            </lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

Now, you just need some CSS to go with it:

@media screen and (min-width: 480px) {
    lightning-layout.mobileButtons {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    lightning-layout.desktopButtons {
        display: none;
    }
}

Demo.

Improve this answer
1
  • That was the most creative and perfect solution, thank you!!! For all the help and contribution on the community of salesforce :)
    – Alexia
    Commented Jan 10, 2023 at 2:37

You must log in to answer this question.

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