[SalesForce] How to adjust column width in

I tried following the SLDS Utilities patterns for both Name Value Pairs and Description List…

In both attempts, the labels' text was truncated, and the tiles had an undesirable excess of white space.

How can I change my markup so that the label columns are sufficiently wide and space is used better?

Label text is truncated despite abundant space

<div class="slds-grid" >
    <div class="slds-col slds-size_1-of-3"  id = "RecordDeets1">
        <lightning:tile>
            <dl class="slds-list_horizontal" >
                <dt class="slds-item_label">
                    <p class="slds-truncate">Close Date:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.closeDate}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">OBC Date:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.obcCompletedDate}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Time Zone:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.timeZone}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Cancel Request in Last 60 Days:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.reqCancelLast60}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Cancel Request in Last 30 Days:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.reqCancelLast30}</p>
                </dd>
            </dl>
        </lightning:tile>
    </div>
    <div class="slds-col slds-size_1-of-3" id = "RecordDeets2" >
           <lightning:tile>
                <dl class="slds-list_horizontal" >
                <dt class="slds-item_label">
                    <p class="slds-truncate">CMRR:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">${!v.vitalStatsWrapper.cmrr}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Last Invoice Date:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.lastInvoiceDate}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Bill to Account:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">${!v.vitalStatsWrapper.billToAccount}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Credit to Account:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">${!v.vitalStatsWrapper.creditToAccount}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Bill Cycle Day:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.billCycleDay}</p>
                </dd>
                </dl>
        </lightning:tile>
    </div>
    <div class="slds-col slds-size_1-of-3" id = "AppData">
        <lightning:tile label="App Data">
        <dl class="slds-list_horizontal">
                <dt class="slds-item_label">
                    <p class="slds-truncate">Last Login Date:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.lastLoginDate}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Last Contact Upload Date:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.lastContactUploadDate}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Total Active Contacts:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.totalActiveContacts}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Total Inactive Contacts:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.totalInactiveContacts}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">Last Campaign Date:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.lastCampaignDate}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">FB Connected?:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.facebookConnectedBoolean}</p>
                </dd>
                <dt class="slds-item_label">
                    <p class="slds-truncate">LinkedIn Connected?:</p>
                </dt>
                <dd class="slds-item_detail">
                    <p class="slds-truncate">{!v.vitalStatsWrapper.linkedInConnectedBoolean}</p>
                </dd>
            </dl>
        </lightning:tile>
    </div>
</div>

Best Answer

No matter how you look at it, you managed to avoid using the correct styles throughout your code. The Name Value pair looks like:

<dl class="slds-list_horizontal slds-wrap">
    <dt class="slds-item_label slds-text-color_weak slds-truncate">
        Last Login Date:
    </dt>
    <dd class="slds-item_detail slds-truncate">
        {!v.vitalStatsWrapper.lastLoginDate}
    </dd>

While the Description List looks like:

<dl class="slds-dl_horizontal">
    <dt class="slds-dl_horizontal__label">
        Last Login Date:
    </dt>
    <dd class="slds-dl_horizontal__detail">
        {!v.vitalStatsWrapper.lastLoginDate}
    </dd>
    ...

Note the different class names, no inner paragraph block, and a lot more classes than you might have been expecting. It's important to pay attention to detail.

Related Topic