tablesaw
tablesaw copied to clipboard
filamentgroup
Text in cell cropped.
Hi, I have the following issue with swipe table:
When set the css rule white-space: nowrap for th elements, if there are some colums that have more width than the first ones, the text appears croped for the last column, I have also done some reseach and noticed that swipe always try to maximize the numer of colums as pointed in #74 discussion, but that makes this issue to appear.
It's there a way to preset the height of th cells before swiping, or make the swipe action to recalc how many columns to show?
Attached an example html of table wiwith the issue
<!DOCTYPE html>
<html>
<head>
<title>ExampleTable</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../dist/tablesaw.css">
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<style>
th {white-space: nowrap;}
</style>
</head>
<body>
<table data-tablesaw-mode="swipe" data-tablesaw-minimap=""
class="c-table s-editor s-editor--table tablesaw">
<thead>
<tr>
<th scope="col" data-tablesaw-priority="persist">TEST1</th>
<th scope="col">TEST1</th>
<th scope="col">TEST1</th>
<th scope="col">TEST1</th>
<th scope="col">extras XAS </th>
<th scope="col">extras XAS 153</th>
<th scope="col">extras XAS153</th>
<th scope="col">origin X</th>
<th scope="col">origin</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
<td>data1 name</td>
<td>data1 name</td>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
<tr>
<td>data2</td>
<td>data2</td>
<td>data2</td>
<td>data2</td>
<td>DDDDDDDD</td>
<td>-</td>
<td>xxxx-xxxxx 230</td>
<td>○</td>
<td> </td>
</tr>
<tr>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>DDDDDDDD</td>
<td>-</td>
<td>xxxx-xxxxx 240</td>
<td>○</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
Hmm, looks like a bug with the column sizing logic here. Good test case, thanks!
