I have a Parent LWC component that has a Lightning layout and which has three columns with child components included. I have a button in the middle of the layout item which can control hide/show of left most layout item.
When I click the Hide button, it hides the layout item, and also the other two layouts automatically adjusted as I have flexible layout true. However, when clicking the Show button, the left-most region appears back and the right-most region go out of the screen.
I noticed that in the rightmost region, datable is causing the issue if I remove the data table it works fine.
Parent Component:
<template>
<lightning-tabset>
<div class={customBackround}>
<lightning-tab label="Student Matching" icon-name="standard:employee_job">
<lightning-layout>
<template if:true={filterShowHide}>
<lightning-layout-item size="2" padding="slds-p-around_x-small">
<div
class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
>
<c-internsip-match-filter></c-internsip-match-filter>
</div>
</lightning-layout-item>
</template>
<lightning-layout-item size="6" padding="slds-p-around_x-small">
<div
class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
>
<c-student-details></c-student-details>
</div>
</lightning-layout-item>
<lightning-layout-item
flexibility="auto"
padding="slds-p-around_x-small"
>
<lightning-layout-item
flexibility="auto no-grow"
class="slds-var-p-top_xx-small"
>
<div
class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
>
<c-seats-avaiable></c-seats-avaiable>
</div>
<lightning-layout-item flexibility="auto">
<div
class="slds-box slds-box_x-small slds-theme_shade slds-theme--alert-texture"
>
<c-seat-details></c-seat-details>
</div>
</lightning-layout-item>
</lightning-layout-item>
</lightning-layout-item>
</lightning-layout>
</lightning-tab>
</div>
<lightning-tab
label="Seat Matching"
icon-name="standard:employee_organization"
>
Two Content !
</lightning-tab>
<lightning-tab label="Matches Map" icon-name="standard:location">
Three Content !
</lightning-tab>
</lightning-tabset>
</template>
Right Most layout item - Child Component- which is causing the issue:
<template>
<template if:true={seatSection}>
<lightning-card
title="Available Seats"
icon-name="standard:service_resource"
>
<lightning-button
slot="actions"
label={label}
onclick={handleHide}
></lightning-button>
<template if:true={section}>
<template if:true={dataAvialble}>
<div
class="slds-p-around_none slds-var-m-top_x-small slds-var-m-bottom_medium slds-m-horizontal_none"
>
<lightning-layout>
<lightning-layout-item size="3" padding="around-small">
<div class="custom-box slds-text-align_left">
<lightning-combobox
name="employer"
label="Employer"
value={employerName}
placeholder="Select Employer"
options={Employeroptions}
onchange={handleChange}
>
</lightning-combobox>
</div>
</lightning-layout-item>
<lightning-layout-item size="3" padding="around-small">
<div class="custom-box slds-text-align_left">
<lightning-combobox
name="track"
label="Track"
value={trackName}
placeholder="Select Track"
options={trackOptions}
onchange={handleChange}
>
</lightning-combobox>
</div>
</lightning-layout-item>
<lightning-layout-item size="3" padding="around-small">
<div class="custom-box slds-text-align_left">
<lightning-combobox
name="specialty"
label="Specialty"
value={specilatyName}
placeholder="Select Specialty"
options={specialtyOptions}
onchange={handleChange}
>
</lightning-combobox>
</div>
</lightning-layout-item>
<lightning-layout-item size="3" padding="around-small">
<div class="custom-box slds-text-align_left">
<div onkeyup={handleKeyUp}>
<lightning-input
name="enter-search"
label="Search"
type="search"
></lightning-input>
</div>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
<div style="height: 300px;">
<lightning-datatable
key-field="id"
data={data}
columns={columns}
onrowaction={handleRowAction}
default-sort-direction={defaultSortDirection}
sorted-direction={sortDirection}
sorted-by={sortedBy}
onsort={doSorting}
max-row-selection="1"
onrowselection={getSelectedRow}
>
</lightning-datatable>
<!--<c-datatable-lwc-fsc record-data={data} column-fields='Id,Name'></c-datatable-lwc-fsc>-->
</div>
</template>
<template if:false={dataAvialble}>
<div class="slds-text-align_center slds-text-heading_medium">
No Match Records Found!
</div>
</template>
</template>
</lightning-card>
</template>
</template>
Screen Shots:
Initial Stage
Step1: Hide the Layoutitem:
Step2: Show the layout item back:
after adding multiplerows=true in child component:
