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>

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.

  • I initially used these "correct" styles copied from the SLDS reference and got the same result. The code I posted was the result of several iterations slightly manipulating the markup to see if I could get anything to budge. – Mobot818 Nov 29 at 20:40
up vote 0 down vote accepted

All I had to do was add style="width:200px;" to the dt and dd elements, and everything fits nicely.

label columns no longer truncated

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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.