Column header disappears depending on length of content. Bug?
Column header disappears depending on length of content. Bug?
gsmith
Posts: 2Questions: 0Answers: 0
The two tables are the same except the content in the 2nd note column is a single long string without any spaces. The lack of a space causes the Note header to disappear.
Bug or fixable with options?
Thanks,
Graham.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.10/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="jQueryUI/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="dataTables.jqueryui.min.css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#example1").dataTable({
'scrollY': '600px',
'scrollCollapse': true,
'paging': false
});
$("#example2").dataTable({
'scrollY': '600px',
'scrollCollapse': true,
'paging': false
});
$('#example2').DataTable().columns.adjust().draw(); // Found in Forum - Makes no difference
});
</script>
</head>
<body>
<div id="div1" style="background-color:lightblue;width:1000px;padding:10px;">
<table id="example1" class="display dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>Note 1</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
<td></td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
<td>Note 2</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
<td></td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
<td>
123456789A123456789B123456789C123456789D123456789E123456789F123456789G123456789H123456789I123456789J 123456789K123456789L123456789M123456789N123456789O123456789P123456789Q123456789R
<td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="div2" style="background-color: lightgreen;width:1000px;padding:10px;">
<table id="example2" class="display dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>Note 1</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
<td></td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
<td>Note 2</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
<td></td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
<td>
123456789A123456789B123456789C123456789D123456789E123456789F123456789G123456789H123456789I123456789J123456789K123456789L123456789M123456789N123456789O123456789P123456789Q123456789R
<td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This discussion has been closed.
Replies
Can you link to a test page that shows the issue please?
Allan
Sorry, not a bug - my mistake. The Note text of the column header is being positioned in the center of the column, but if the content is large this is falling outside the bounds of the table and looks like it disappears. Fixed with css.