3

I have a custom LWC page which has lightning-layout-item

My Page has Header, Left layout and Right Layout. When i minimize the window the right layout overlap to left layout.

Expecting is to move the left layout to bottom and right layout to view the page.

Can any one please help me on this. I gone though this link https://www.lightningdesignsystem.com/utilities/grid/#Creating-Responsive-Layouts

still not getting the exact solutions

<lightning-layout multiple-rows="true">
                <lightning-layout-item size="12">
                    <div class="page-section page-header">
                        <div class="slds-global-header slds-grid slds-grid_align-spread" style="height: 97px">
                            <div class="slds-global-header__item">

                                <img src={Banner} alt="banner Image"
                                    style="-ms-interpolation-mode:bicubic;border:none;max-width:100%;outline:none;width: 100px;vertical-align: bottom;"
                                    width="32" />
                            </div>


                        </div>
                    </div>
                    <div class="slds-context-bar slds-context-bar--tabs oneGlobalNav oneConsoleNav" tabindex="-1"
                        data-aura-class="oneGlobalNav oneConsoleNav">
                        <div class="slds-context-bar__primary navLeft">
                            <div
                                class="slds-context-bar__item slds-context-bar_dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click slds-no-hover">
                                <div class="appName slds-context-bar__label-action slds-context-bar__app-name"><span
                                        class="slds-truncate" title="Time Sheet">Time Sheet</span></div>
                            </div>
                        </div>
                        <div class="slds-context-bar__tertiary slds-col--bump-left navRight">
                            <div class="appName slds-context-bar__label-action slds-context-bar__app-name"><span
                                    class="slds-truncate" title="Time Sheet"> Welcome <b>{name}</b></span></div>
                        </div>
                    </div>
                </lightning-layout-item>


                <lightning-layout-item padding="around-small" size="12">
                    <lightning-layout horizontal-align="stretch" multiple-rows="true" class="x-large">
                        <lightning-layout-item padding="around-small" size="3">
                            <lightning-card>


                            <div class="page-section page-right">





                                <lightning-vertical-navigation class="navigation" compact>
                                    <lightning-vertical-navigation-section>
                                        <template for:each={timesheetData} for:item="tsd" for:index="index">
                                            <div class="demo-only" key={tsd.StartEndDate}>
                                                <lightning-vertical-navigation-item-icon label={tsd.StartEndDate}
                                                    name={tsd.StartEndDate} key={tsd.StartEndDate}
                                                    data-menu-item-id={tsd.StartEndDate}
                                                    icon-name="standard:timesheet_entry"
                                                    onclick={handleTimeSheetDetail}>
                                                </lightning-vertical-navigation-item-icon>
                                            </div>
                                        </template>
                                    </lightning-vertical-navigation-section>
                                </lightning-vertical-navigation>

                            </div>
                        </lightning-card>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small" size="9">
                            <div class="page-section page-main">

                                <!-- slds-medium-size_6-of-12 -->
                                <div class="slds-align_absolute-center">
                                    <table class="slds-table  slds-table_cell-buffer 
                                    slds-table_bordered slds-border_left 
                                    slds-border_right  slds-large-size_3-of-12">
                                        <thead>
                                            <tr class="slds-line-height_reset">
                                                <th class="" scope="col">
                                                    <div class="slds-truncate" title="Opportunity Name">Project Name
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template for:each={timesheetProjectData} for:item="tsp" for:index="index">
                                                <tr key={tsp.Id}>
                                                    <td data-label="Opportunity Name">
                                                        <div>
                                                            <a href="javascript:void(0);"
                                                                tabindex="-1">{tsp.emitCS__Project_Name__c}</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>



                            </div>
                        </lightning-layout-item>                        
                    </lightning-layout>
                </lightning-layout-item>

            </lightning-layout>
10

The key to understanding the layout in lightning-layout-item is that the size attribute defines the default size.

The other attributes like medium-device-size define how the layout should look on device LARGER than a medium screen; say a desktop.

So the item below will take 12 parts of the screen on all screens but it will reduce to 4 parts on screens larger than the medium screen (anything above than a tablet).

<lightning-layout-item size="12" medium-device-size="4" padding="around-small">

Playground to see the example (Hide the sidebars and try resizing the preview panel.)

and here is your example where I have made changes in line 35 and 63 by adding one more attribute small-device-size.

On devices larger than medium:

enter image description here


On devices less than medium or Medium:

enter image description here


Code:

<template>
    <lightning-layout multiple-rows="true">
        <lightning-layout-item size="12">
            <div class="page-section page-header">
                <div class="slds-global-header slds-grid slds-grid_align-spread" style="height: 97px">
                    <div class="slds-global-header__item">
                        Banner
                    </div>
                </div>
            </div>
        </lightning-layout-item>
        <lightning-layout-item size="12" medium-device-size="4" padding="around-small">
            <div class="page-section page-header">
                <div class="slds-global-header slds-grid slds-grid_align-spread" style="height: 97px">
                    <div class="slds-global-header__item">
                        Left Bar 
                    </div>
                </div>
            </div>
        </lightning-layout-item>
        <lightning-layout-item size="12" medium-device-size="8" padding="around-small">
            <div class="page-section page-header">
                <div class="slds-global-header slds-grid slds-grid_align-spread" style="height: 97px">
                    <div class="slds-global-header__item">
                        Right Side Bar
                    </div>
                </div>
            </div>
        </lightning-layout-item>
    </lightning-layout>
</template>

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.