I have the following HTMLin a Lightning Web Component:
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-3 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-input data-field="cornerFee" class="slds-p-bottom_medium" label="Corner Fee:" variant="label-stacked" type="number" formatter="currency" value={cornerFee} disabled ></lightning-input></div>
</div>
<div class="slds-col slds-size_1-of-3 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-input data-field="cornerQty" class="slds-p-bottom_medium" label="# of Corners:" variant="label-stacked" type="number" value={cornerQty} ></lightning-input></div>
</div>
<div class="slds-col slds-size_1-of-3 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-input data-field="cornerCost" class="slds-p-bottom_medium" label="Corner Cost:" variant="label-stacked" type="number" formatter="currency" value={cornerCost} disabled ></lightning-input></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Select" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Letter Code" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Description" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Price/SqFt" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Booth #" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Depth" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Width" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Total SqFt" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Total Booth Cost" ></lightning-formatted-text></div>
</div>
</div>
The first three elements in the grid, the lightning-input components, size as expected (via the slds-size_1-of-3 class) relative to the containing <div class="slds-grid slds-wrap"> grid.
However, the remaining elements do not. Rather, they all get squished to the left of the div:
Below is the corresponding HTML that's rendered:
For the column headings, I originally had straightforward HTML like so:
<div class="slds-align_absolute-center"><b>Select</b></div>
I hoped using a lightning component like lightning-formatted-text instead would solve the problem, but it didn't.
Also, as you can see in the first screenshot, further below in my LWC, I have another grid containing 9 lightning-input and they size just fine.
Finally, if I remove a column and use slds-size_1-of-8, everything is sized properly. I only discovered this problem when I wanted to add a column and changed the class for all the elements to slds-size_1-of-9.
Is this a bug or am I doing something incorrectly?
Below is the entirety of the LWC's HTML (I also tried with and without slds-align_absolute-center for the column headings as I did for the lower lightning-input components):
<template>
<div if:true={loading} class="slds-is-relative">
<lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
</div>
<lightning-button variant="brand" label="Add Booths" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
<template if:true={visible}>
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" alternative-text="Click to Close" size="small"></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Booths</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<div if:true={loading} class="slds-is-relative">
<lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
</div>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-3 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-input data-field="cornerFee" class="slds-p-bottom_medium" label="Corner Fee:" variant="label-stacked" type="number" formatter="currency" value={cornerFee} disabled ></lightning-input></div>
</div>
<div class="slds-col slds-size_1-of-3 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-input data-field="cornerQty" class="slds-p-bottom_medium" label="# of Corners:" variant="label-stacked" type="number" value={cornerQty} ></lightning-input></div>
</div>
<div class="slds-col slds-size_1-of-3 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-input data-field="cornerCost" class="slds-p-bottom_medium" label="Corner Cost:" variant="label-stacked" type="number" formatter="currency" value={cornerCost} disabled ></lightning-input></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Select" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Letter Code" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Description" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Price/SqFt" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Booth #" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Depth" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Width" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Total SqFt" ></lightning-formatted-text></div>
</div>
<div class="slds-col slds-size_1-of-9 slds-p-bottom_small">
<div style="font-weight:bold"><lightning-formatted-text value="Total Booth Cost" ></lightning-formatted-text></div>
</div>
</div>
<template iterator:it={products}>
<div class="slds-grid slds-wrap" key={it.value.LWC_Generated_ID__c}>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input data-name={it.value.elementId} name={it.value.Id} class="slds-p-bottom_medium" label="Select" type="checkbox" variant="label-hidden" onchange={handleChange}></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center slds-p-horizontal_x-small">
<lightning-input name={it.value.Id} class="slds-p-bottom_medium" label="Letter Code" value={it.value.Product2.Letter_Code__c} variant="label-hidden" disabled></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input name={it.value.Id} class="slds-p-bottom_medium" label="Description" value={it.value.Product2.Description} variant="label-hidden" disabled></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input name={it.value.Id} class="slds-p-bottom_medium" label="Price/SqFt" value={it.value.Product2.Price__c} max-length="3" type="number" formatter="currency" variant="label-hidden" disabled></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input data-name={it.value.elementId} name={it.value.Id} class="slds-p-bottom_medium" label="Booth Number" value={it.value.Booth_Number__c} max-length="3" type="number" variant="label-hidden" onchange={handleChange} disabled></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input data-name={it.value.elementId} name={it.value.Id} class="slds-p-bottom_medium" label="Depth" value={it.value.Depth__c} max-length="3" type="number" variant="label-hidden" onchange={handleChange} disabled></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input data-name={it.value.elementId} name={it.value.Id} class="slds-p-bottom_medium" label="Width" value={it.value.Width__c} max-length="3" type="number" variant="label-hidden" onchange={handleChange} disabled></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input class="slds-p-bottom_medium" label="Total SqFt" value={it.value.Total_SqFt__c} max-length="3" type="number" variant="label-hidden" disabled></lightning-input>
</div>
</div>
<div class="slds-col slds-size_1-of-9">
<div class="slds-align_absolute-center">
<lightning-input name={it.value.Id} class="slds-p-bottom_medium" label="Total Booth Cost" value={it.value.Total_Booth_Cost__c} max-length="4" type="number" formatter="currency" variant="label-hidden" disabled></lightning-input>
</div>
</div>
</div>
</template>
</div>
</article>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={closeModal}>Cancel</button>
<button class="slds-button slds-button_brand" onclick={handleSave} disabled={saveDisabled}>Save</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>
