0

I used lightning-layout for my UI by giving a size 3. I have an 8 button on-screen suppose when I did not allow a user from a specific button then the UI can not rearrange. Check the sample code.

<div class="slds-m-around_x-small slds-theme_shade">
   <lightning-layout horizontal-align="space">
      <template if:true={isCustomerCareAccess}>
         <lightning-layout-item padding="around-small" size="3" onclick={cutomerCareTemplate}>
            <div class="slds-box slds-p-left_xxx-small slds-theme_default card">
               <img src={customerImag} style="width: 30px;height:30px">
               <label class="slds-form-element__label" for="form-element-01">
                  <span style="font-size: 15px;">{label.CustomerCare}</span>
               </label>
            </div>
         </lightning-layout-item>
      </template>
      <template if:true={isDataAccess}>
         <lightning-layout-item padding="around-small" size="3" onclick={dataReportReqTemplate}>
            <div class="slds-box slds-p-left_xxx-small slds-theme_default card">
               <img src={DataReportImg} style="width: 30px;height:30px">
               <label class="slds-form-element__label" for="form-element-01">
                  <span class="slds-m-left_x-small" style="font-size: 15px;">{label.DateAndReport}</span>
               </label>
            </div>
         </lightning-layout-item>
      </template>
      <template if:true={isFinanceTechAccess}>
         <lightning-layout-item padding="around-small" size="3">
            <div class="slds-box slds-p-left_xxx-small slds-theme_default first">
               <img src={finTeachImg} style="width: 30px;height:30px">
               <label class="slds-form-element__label" for="form-element-01">
                  <span class="slds-m-left_x-small" style="font-size: 15px;">{label.FinancialTech}</span>
               </label>
            </div>
         </lightning-layout-item>
      </template>

kindly check the belowenter image description here image.

Improve this question

1 Answer 1

Reset to default
0

Use pull-to-boundary attribute of lightning-layout.

pull-to-boundary

Pull layout items to the layout boundaries based on the following values. If padding is used on layout items, this attribute pulls the elements on either side of the container to the boundary. Choose the size that corresponds to the padding on your layout items. For instance, if lightning-layout-item padding="horizontalSmall", choose pull-to-boundary="small".

  • small: Appends the slds-grid_pull-padded class to the grid.
  • medium: Appends the slds-grid_pull-padded-medium class to the grid.
  • large: Appends the slds-grid_pull-padded-large class to the grid.

Use the class or multiple-rows attributes to customize the styling in other ways.

<template>
    <lightning-layout pull-to-boundary="medium">
        <lightning-layout-item flexibility="auto" padding="horizontal-medium">
            <div class="slds-box slds-p-left_xxx-small slds-theme_default card">
                <label class="slds-form-element__label" for="form-element-01">
                    <span style="font-size: 15px;">label.CustomerCare</span>
                </label>
            </div>
        </lightning-layout-item>
        <lightning-layout-item flexibility="auto" padding="horizontal-medium">
            <div class="slds-box slds-p-left_xxx-small slds-theme_default card">
                <label class="slds-form-element__label" for="form-element-01">
                    <span style="font-size: 15px;">label.CustomerCare</span>
                </label>
            </div>
        </lightning-layout-item>
    </lightning-layout>
</template>

enter image description here

Improve this answer
2
  • works, but I want to only show 4 buttons in one row the problem is it shows all 8 buttons on one row with a scrollbar.
    – relcey
    Jun 15 at 11:24
  • Use two different lightning-layout instead of putting all 8 button inside one.
    – sanket kumar
    Jun 15 at 15:58

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.