Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Anthony Wheeler 1Anthony Wheeler 1 

slds-truncate not working

<!-- Subscription Table -->
<div class="slds-scrollable_y" style="height: 30rem;">
	<table class="slds-table slds-table_bordered">
		<tbody>
			<aura:iteration items="{!v.subscriptions}" var="sub">
				<tr class="slds-hint-parent">
					<td>
						<div class="slds-grid">
							<div class="slds-col slds-size_1-of-8 slds-p-left_small" ondblclick="{!c.editOn}">
								<aura:if isTrue="{!v.edit}">
									<ui:inputCheckbox value="{!sub.subscribed}"/>
									<aura:set attribute="else">
										<ui:outputCheckbox value="{!sub.subscribed}"/>
									</aura:set>
								</aura:if>
							</div>
							<div class="slds-col slds-size_7-of-8 slds-text-align_left slds-has-flexi-truncate">
								<p class="slds-truncate" title="{!sub.productName}">
									{!sub.productName}
								</p>
							</div>
						</div>
					</td>
				</tr>
			</aura:iteration>
		</tbody>
	</table>
</div>
<!-- Subscription Table -->
User-added image
I'm developing a component that allows users to mass subscribe customers to Product email alerts. I want the listed product names to truncate once the length reaches the width of the component. However, the names are currently extending past the component and not truncating as expected. I've attached the portion of my markup in question and the resulting component. Any and all help is appreciated.

Thanks
Best Answer chosen by Anthony Wheeler 1
karthikeyan perumalkarthikeyan perumal
Hello, 

Try this, 

  
<!-- Subscription Table -->
<div class="slds-scrollable_y" style="height: 30rem;">
	<table class="slds-table slds-table_bordered">
		<tbody>
			<aura:iteration items="{!v.subscriptions}" var="sub">
				<tr class="slds-hint-parent">
					<td>
						<div class="slds-grid">
							<div class="slds-col slds-size_1-of-8 slds-p-left_small" ondblclick="{!c.editOn}">
								<aura:if isTrue="{!v.edit}">
									<ui:inputCheckbox value="{!sub.subscribed}"/>
									<aura:set attribute="else">
										<ui:outputCheckbox value="{!sub.subscribed}"/>
									</aura:set>
								</aura:if>
							</div>
							<div class="slds-col slds-size_1-of-2">
								<p class="slds-truncate" title="{!sub.productName}">
									{!sub.productName}
								</p>
							</div>
						</div>
					</td>
				</tr>
			</aura:iteration>
		</tbody>
	</table>
</div>
<!-- Subscription Table -->



Thanks
karthik