0

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 enter image description here

Step1: Hide the Layoutitem: enter image description here

Step2: Show the layout item back: enter image description here

after adding multiplerows=true in child component: enter image description here

0

The error which you are facing is due to the fact that in your third component 'c-seats-available' and 'c-seat-detail' you are not assigning them any size and have put 'flexibility' as auto so when the left most panel is hidden the component just spreads over the available space and doesn't shrink when left most component is shown again.

You will have to use the Grid system for all your components and assign them a particular size and put flexibility = auto on all layout-item

below is the modified code for parent component

<template>
  <lightning-tabset>
     <div class={customBackround}>
        <lightning-tab label="Student Matching" icon-name="standard:employee_job">
           <lightning-layout multiple-rows="true">
              <template if:true={filterShowHide}>
                <lightning-layout-item size="2" flexibility="auto" 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" flexibility="auto" 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 multiple-rows="true">
            <lightning-layout-item size="12" flexibility="auto" padding="slds-p-around_x-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>
            <lightning-layout-item size="12" 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>
      </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>

Also in your child component put the data table in a lightning-layout

<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-layout>
            <lightning-layout-item size="12" padding="around-small">
                <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>
            </lightning-layout-item>
        </lightning-layout>
        <!--<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>
9
  • 1
    I tried your code, the right-most region is going down means, it is going to a new row. – Ajay Aug 29 '20 at 13:50
  • The right most region is going down even when 1st region is not removed? – maniac coder Aug 31 '20 at 9:52
  • yes, as soon as component renders. I am trying with this. <lightning-layout> <lightning-layout-item flexibility="auto no-grow"> <div style="height: 300px;"> <lightning-datatable key-field="id" > </lightning-datatable> </div> </lightning-layout-item> </lightning-layout> – Ajay Aug 31 '20 at 13:26
  • now the datable is not going out of the screen, however, the datable is not spreading across the width. – Ajay Aug 31 '20 at 13:27
  • @Ajay: in the parent component remove "multiple-rows = true" only from line 5. And remove 'no-grow' from your datatable lightning-layout-item – maniac coder Aug 31 '20 at 14:46
0

I solved this issue by adding a dynamic size for the lightning layout item.

when I hide, I am setting size =6, otherwise it will be 4. it works fine.

 <lightning-layout-item size={seatSize} flexibility="auto">

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.