0

I am using lightning setup assistant in my UI, and I am trying to make it mobile responsive.

The button in question here is Add Email Address

I am trying to set size attributes accordingly, however it is not working as expected.

In desktop Viee, it looks correct, however in mobile view the button goes out of the boundry of the screen, horizontally, my requirement is to show the button below the text.

Here is my code

                                                        <div class="slds-progress__item_content">
                                                        <lightning:layout class="slds-p-bottom_small" horizontalAlign="spread">
                                                            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="8" largeDeviceSize="9">
                                                                <div class="slds-m-right_medium"><b>{!$Label.c.Enrollment_Setup_Section_2_Head}</b>&nbsp; {!$Label.c.Enrollment_Setup_Section_2_Subhead}</div>
                                                            </lightning:layoutItem>
                                                            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="4" largeDeviceSize="3">

                                                                <lightning:layout horizontalAlign="end">
                                                                    <lightning:layoutItem>
                                                                        <lightning:button class="slds-theme_neutral slds-button_outline-brand" variant="neutral" label="{!$Label.c.Enrollment_Setup_Section_2_Button}" onclick="{!c.displayInvitesScreen}" disabled="{!or(v.isDependent,v.value4==100)}"></lightning:button>
                                                                    </lightning:layoutItem>
                                                                </lightning:layout> 
                                                            </lightning:layoutItem>
                                                        </lightning:layout>
                                                    </div>

This is the desktop View. Desktop View

This is mobile view.

Mobile View

1 Answer 1

1

You should have multipleRows="true" in layout without which all the items will be aligned in single row and will not go to next line even if the total size crosses 12.

<lightning:layout multipleRows="true" class="slds-p-bottom_small" horizontalAlign="spread" >

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.