Overspill of hidden table column affecting the footable column hides

Question

I have the following jQuery footable plugin table:

<table data-filter="#filter" class="footable" data-page-size="10">
        <thead>
          <tr>
            <th data-class="expand"> Name</th>
            <th data-hide="phone,tablet" data-sort-initial="true"> Author</th>
            <th data-hide="phone,tablet" data-sort-initial="true"> Description</th>
            <th data-hide="phone,tablet" data-sort-initial="true"> Uploaded</th>
            <th data-hide="phone,tablet" data-sort-initial="true"> Expires</th>
            <th data-chide="phone,tablet" data-sort-initial="true" data-type="numeric"> Enrolled</th>
            <th data-hide="phone,tablet" data-sort-initial="true" data-type="numeric"> Points</th>
            <th data-chide="phone,tablet" data-sort-initial="true"> Published</th>
            <th data-chide="phone,tablet" data-sort-initial="true"> Survey</th>                
            <th data-hide="phone,tablet" data-sort-initial="true"> Survey Name</th>
            <th data-chide="phone,tablet" data-sort-initial="true"> Actions</th>
          </tr>
        </thead>
        <tbody> 
        @foreach (var course in Model.CourseList)
        {
          <tr>           
            <td>@course.Name</td>                  
            <td>@course.Author</td>
            <td>@course.Description</td>
            <td>@course.UploadDate.ToShortDateString()</td>
            <td>@course.ExpiryDate.ToShortDateString()</td>                  
            <td>@course.Enrollments.Count</td>  
            <td>@course.ParticipationPoints</td>
            <td>@course.IsPublished</td> 
            <td>@Model.HasSurvey(course.CourseID)</td>  
            <td>@Model.GetSurveyName(course.CourseID)</td>                 
            <td><a href="@Url.Action("ViewCourse", "Admin", new { id = @course.CourseID })" class="view" title="View"> <i class="icon20 icon-zoom-in"></i></a>
            <a href="@Url.Action("EditCourse", "Admin", new { id = @course.CourseID })" class="edit" title="Edit"><i class="icon20 icon-edit"></i></a>
            <a href="@Url.Action("DeleteCourse", "Admin", new { courseID = @course.CourseID })" class="delete" title="Delete"><i class="icon20 icon-remove"></i></a>
            <a href="@Url.Action("PublishCourse", "Admin", new { courseID = @course.CourseID })" class="publish" title="Publish/Unpublish"><i class="icon20 icon-book"></i></a>
            <a href="@Url.Action("BulkTargetCourse", "Admin", new { courseID = @course.CourseID })" class="target" title="Bulk Target"><i class="icon20 icon-screenshot"></i></a></td>
          </tr>
        }                        
        </tbody>
        <tfoot class="footable-pagination">
          <tr>
            <td colspan="8"><ul id="pagination" class="footable-nav" /></td>
          </tr>
        </tfoot>
      </table>

If I enter the text "abcdefghijklmnopqrstuvwxyzbcdefghijklmnopqrstuvwxyz" without any spaces the columns are not automatically hidden and the table stretches across the page. Has anyone see this before and if so have you got any solutions for the problem?

Fiddle shown here: http://jsfiddle.net/4RpE8/10/

Your posted code does not really show the problem. Your server side tags are making difficult to build a demo. — Marc Audet, Sep 06 '13 at 11:22
http://jsfiddle.net/4RpE8/6/ If you update the "query" text in the first column to "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz" you will see the problem — Jay, Sep 06 '13 at 11:31
Add your fiddle to your question so others can see it and help you! Thanks! — Marc Audet, Sep 06 '13 at 11:35
Just tried it. You are seeing normal table behavior. The non-breaking string is causing the table cell to expand and that causes the table to overflow. However, the hidden columns are still hidden so the plug-in works correctly. The real issue is dealing with the non-breaking text. I will concentrate on that. — Marc Audet, Sep 06 '13 at 11:39
This was a hidden column and it still seems to show. I have this displayed on the expand of the row and there seems to be enough room for it just cant make sense of it — Jay, Sep 06 '13 at 11:42

score 2 · Accepted Answer · answered Sep 06 '13 at 11:44

2

I think this will solve your problem:

.footable td {
    word-break: break-all;
}

This will force a long non-breaking string to wrap within the table cell without forcing the cell width to expand.

See demo at: http://jsfiddle.net/audetwebdesign/wStug/

Reference: http://www.w3.org/TR/css3-text/#word-break

answered Sep 06 '13 at 11:44

Marc Audet

46,011
11
63
83

You are a legend thanks so much Marc really appreciate your help this was driving me mad :) – Jay Sep 06 '13 at 11:48
No problem! I now know about footable and how to set up a Bootstrap demo in jsfiddle, a big thanks to you too! – Marc Audet Sep 06 '13 at 11:50

Overspill of hidden table column affecting the footable column hides

1 Answers1