0

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:

enter image description here

Below is the corresponding HTML that's rendered:

enter image description here

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>
0

The number of columns available in the responsive grid is 1,2,3,4,5,6,7,8 and 12. So, 1-of-9 is not going to get a width.

You can learn more in the blueprint documentation: https://www.lightningdesignsystem.com/utilities/grid/

| improve this answer | |

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.