[SalesForce] lwc combobox not aligning properly inside a lightning-layout-item

I am having an issue with lightining-layout-items. My two "inner" items are not aligned properly. think this is because I am iterating through each row.

For both the medical and form combo-boxes I want to have a text-align: left output where they are aligned independently of the how long the Name column is.

enter image description here

Parent Component:

 <template if:true={responseback}>
      <lightning-layout multiple-rows horizontal-align="spread">
          <template for:each={students} for:item="student">
              <lightning-layout-item size="12" key={student.id} class="slds-p-around_small">
                  <c-child-form
                    application-id={student.Id}
                    first-name={student.TargetX_SRMb__Contact__r.FirstName} 
                    last-name={student.TargetX_SRMb__Contact__r.LastName}
                    medical-pick-list-value={student.AIS_Medical_Release__c}
                    travel-pick-list-value={student.AIS_Travel_Form_Received__c}
                  ></c-child-form>
              </lightning-layout-item>
          </template>
      </lightning-layout>
    </template>

Child Component 

<template>
  <lightning-card>
    <lightning-layout horizontal-align="spread">
      <lightning-layout-item flexibility="3">
        <lightning-formatted-name
          first-name={firstName}
          last-name={lastName}
          id={applicationId}
          style="font-size: 20px"
        >
        </lightning-formatted-name>
      </lightning-layout-item>
      <lightning-layout-item size="4">
        <template if:true={medicalReleasePickListValues.data}>
          <lightning-combobox
            name="medicalPicklist"
            label="Medical Form"
            value={medicalPickListValue}
            options={medicalReleasePickListValues.data.values}
            onchange={handleChangeMedical}
          >
          </lightning-combobox>
        </template>
      </lightning-layout-item>
      <lightning-layout-item size="4">
        <template if:true={travelReleasePickListValues.data}>
          <lightning-combobox
            name="travelPicklist"
            label="Travel Form"
            value={travelPickListValue}
            options={travelReleasePickListValues.data.values}
            onchange={handleChangeTravel}
          >
          </lightning-combobox>
        </template>
      </lightning-layout-item>
      <lightning-layout-item flexibility="shrink">
        <lightning-button-icon
          icon-name="utility:save"
          alternative-text="Save"
          class="slds-m-left_xx-small"
          title="Save"
          onclick={submitFormData}
        ></lightning-button-icon>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>

Best Answer

Since you are using flexibility="3", columns grow or shrink equally as space allows. You need to see the documentation to understand it better. Remove flexibility attribute from all items.

For flexibility,

Make the item fluid so that it absorbs any extra space in its container or shrinks when there is less space. Allowed values are: auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don't shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don't grow as space increases), no-flex (columns don't grow or shrink as space changes). Use a comma-separated value for multiple options, such as 'auto, no-shrink'.

I would suggest you use size instead. Size you have 4 columns, you can use size="3" for equal width columns. Each row is divided into 12 sizes. Go through grid-system to understand better.

Note that when you use multiple-rows on layout, whatever crosses 12 sizes will go into next row, or else will stay in same row.

Related Topic