0

I am trying to word-wrap the text in the first column of the table within a width of 50 %. I have tried using the table layout fixed and the word-wrap:break-word but to no use. The text still shows in a single line.

Component

<table style="height:400px;"  class="slds-table slds-table--bordered slds-max-large-table--stacked-horizontal slds-table_striped " >
        <thead>
          <tr class="slds-text-title--caps" style="background-color: gainsboro;">
              <th scope="col"  style="width: 50%;">
                <div class="slds-truncate" title="Client Value Potential" style="font-weight: bold;">Fox Evaluator</div>
              </th>
              <th scope="col" colspan="6" style="text-align: center;width: 50%;">
                <div class="slds-truncate" title="Option Name" style="font-weight: bold;">Scale</div>
              </th>
          </tr> 
       </thead> 

        <tbody> 
              <tr>
                    <td style="width:100px; word-wrap:break-word;" scope="row"  data-label="Fox Question">
                      <div class="slds-truncate">

                         <ui:outputText value="{!v.qstList.Contact.FirstName}"/>&nbsp;<ui:outputText value="{!v.questionA}"/> 

                      </div>
                    </td>
                    <td data-label="Option Name" style="text-align: center;">                
                      <img style="width:20px;cursor:pointer;display: inline-block;" data-contact="{!v.qstList.Id}" data-id="1" id="{!'leftClick1' + v.qstList.Id}" class=""  src="{!$Resource.OA+ '/Icons/leftIcon.png'}" onclick="{!c.handleLeftClick}"/>
                      <div style="display: inline-block;width: 25%;"><p id="{!'aFox1' + v.qstList.Id}" align="center" style="">-Choose Scale-</p> </div>
                      <img style="width:20px;cursor: pointer;" data-contact="{!v.qstList.Id}" data-id="1" id="{!'rightClick1' + v.qstList.Id}" class="disabled" src="{!$Resource.OA+ '/Icons/rightIcon.png'}" onclick="{!c.handleRightClick}"/>

                      <img src="{!$Resource.OA+ '/Icons/help.png'}" id="1" height="16" width="16" class="helpOrb" 
                         onclick=""/>
                    </td> 

              </tr>    
        </tbody>
 </table>

This now looks

enter image description here

How I want it to show is something like

enter image description here

3
  • have you tried using max-width: calc(length in % or em or px * a value); to the proper scope?
    – glls
    Aug 18, 2017 at 21:21
  • tried that but the line does not break
    – Brav
    Aug 18, 2017 at 21:23
  • would you mind updating your post with the different css rules and scopes you've tried? add a comment in your markup as well so other can better help you. thanks!
    – glls
    Aug 18, 2017 at 21:42

1 Answer 1

7

First, you're using slds-truncate, which causes "..." when an element overflows. Remove this from your code. Secondly, do not use tables, as they are unreliable. The data table version is awfully unpredictable and not supported in S1 mobile, either. Using the standard Grid will give you perfect flexibility across all devices in a reliable manner.

Here's a copy-paste example that you can use to get started:

<aura:application extends="force:slds">
    <div class="slds-grid">
        <div class="slds-size_1-of-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis ipsum eros. Donec sed odio in nisl imperdiet dapibus convallis eget tellus. In hac habitasse platea dictumst. Donec dapibus mauris hendrerit massa elementum venenatis. Mauris elit odio, vestibulum quis risus vel, vehicula fringilla quam. Sed sed elit ac orci eleifend cursus eu sit amet nulla. Morbi gravida tortor nec sapien semper, a sodales erat accumsan. Fusce vel libero mauris. Sed faucibus nec augue et maximus.
        </div>
        <div class="slds-size_1-of-3">
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis lobortis sodales. In sagittis, libero eu ornare ultrices, urna leo rutrum lectus, eget gravida neque felis eget sem. Curabitur lacinia neque id magna ullamcorper, vel posuere ligula vestibulum. Sed eu cursus tortor. Donec ullamcorper magna ut purus vestibulum porttitor. Vestibulum consectetur ultricies mi, id porta magna rutrum id. Aliquam laoreet nisl non magna facilisis aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mollis massa cursus quam viverra, eu consequat arcu efficitur.
        </div>
        <div class="slds-size_1-of-3">
            Sed ligula mauris, dignissim quis purus eu, lacinia euismod massa. Nulla lacinia, nisi vitae consequat auctor, diam risus ullamcorper turpis, non mollis nisi elit vitae ipsum. Vivamus condimentum, mi nec mollis malesuada, tellus odio placerat ipsum, ac rhoncus libero tellus non mi. Nullam feugiat neque eu rhoncus vulputate. Sed leo justo, pellentesque non bibendum at, auctor eget erat. Aenean vulputate vestibulum arcu non tempor. Nunc lobortis pharetra nulla convallis pretium. Nunc ultricies, lacus eleifend rutrum vestibulum, nisi ligula commodo tortor, eget suscipit tortor ante eget purus. Ut a justo semper, auctor ligula sit amet, auctor lorem. Mauris tincidunt vehicula arcu in lobortis. Nunc sed eros diam. Fusce commodo lorem non lacinia facilisis. Vestibulum et accumsan odio. Sed a odio sit amet diam tincidunt euismod. Praesent efficitur purus est, eu ullamcorper quam finibus eu.
        </div>
    </div>
</aura:application>

You can use all kinds of various ratios to design the perfect grid for your purpose, such as 1-of-2, 1-of-4, 2-of-12, etc. Just keep your ratios set to a combination of fractions that add up to 100% and the grid takes care of the rest for you.

3
  • Side question, if not using slds-wrap is there any way to force a new row without having to put a placeholder div to fill up the remaining x/12th or creating a new slds-grid div block ? I assume no.....
    – Eric
    Aug 18, 2017 at 23:15
  • @Eric As far as I'm aware, no. I haven't seen anything in the docs regarding that..
    – sfdcfox
    Aug 19, 2017 at 0:01
  • I wish they would add a slds-row to force a new row. Would save markup as sometimes you want automatic sizing but want the next content to start on a new row
    – Eric
    Aug 19, 2017 at 0:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .