Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When resizing column width it wraps

See original GitHub issue

Hi, When I resize width of the columns, header become corrupt like in screenshot.

screenshot from 2016-11-28 15-52-40

Well, I just tried tabulator_modern.css and no this issue. So I guess tabulator.css had an issue…

Example I trying:

<!DOCTYPE html>

<html>
   <head>
        <title>Broken Header</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/tabulator.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/tabulator.js"></script>
        
    </head>
<body>
<h1>Heder Broke on Resize</h1>
<br />

<div id="example-table"></div>

<script type="text/javascript">

$(document).ready(function() {
    $("#example-table").tabulator({
        fitColumns:true,
        tooltips:true,
        pagination:true,
        movableCols:true,
        index: "ID",
        persistentLayout: false,
        columns:[ //Define Table Columns
            {title:"Days", field:"Days", sorter:"number", width:150, align:"left", headerFilter:true},
            {title:"Desc", field:"Desc", sorter:"string", width:250, sortable:true,  headerFilter:true},
            {title:"Control", field:"Control", sorter:"string", width:150, align:"left",  headerFilter:true},
            {title:"Account", field:"Account", sorter:"string", width:100, editable:true, headerFilter:true},
            {title:"Amount", field:"Amount", sorter:"number", width:125, align:"left", headerFilter:true},
            {title:"Comment", field:"Comment2", sorter:"string", align:"left", editable:true, headerFilter:true}
        ],
        rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked
        },
        cellEdited:function(id,data,row){
       },

    });
    $("#example-table").tabulator("setData", tabledata);

});


var tabledata = [{"ID":1,"Account":"66","Days":66,"Desc":"CAC","Control":"omg1025","Amount":-10000,"Comment2":"nc"},{"ID":2,"Account":"77","Days":0,"Desc":"JORDAN","Control":"omg1026","Amount":27294.00,"Comment2":"nc"}];
</script>

</body>
</html>