Tabulator: When resizing column width it wraps

Created on 28 Nov 2016  路  7Comments  路  Source: olifolkerd/tabulator

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>
Bug
Source
picture MikhailKlemin

All 7 comments

Hey,

it definitely shouldn't be doing that! which browser are you using?

I will have a look into it this evening and get back to you.

Oli

olifolkerd picture olifolkerd on 28 Nov 2016

Hey Oli,
It is Firefox 50. The problem I have is with tabulator.css ... other themes work as intended.

MikhailKlemin picture MikhailKlemin on 28 Nov 2016

great! thanks, that will be a big help!

olifolkerd picture olifolkerd on 28 Nov 2016

That was just the hint i needed! there was a white-space: nowrap; missing in the default theme.

I have committed the fix for this now, let me know how you get on!

Cheers

Oli

olifolkerd picture olifolkerd on 28 Nov 2016

Hi Oli, I am glad I made a little bit of contribution :-)
The table is great!

MikhailKlemin picture MikhailKlemin on 28 Nov 2016
👍1

Thanks, its always nice to hear people are enjoying using Tabulator.

let me know if you have any other feedback or suggestions :D

olifolkerd picture olifolkerd on 28 Nov 2016

Thanks for nice grid plugin,
I stuck in this place but saw this issue and it worked.
Thanks

DeeptiRajput26 picture DeeptiRajput26 on 9 Mar 2017
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sphynx79 picture sphynx79  路  3Comments
c3pos-brother picture c3pos-brother  路  3Comments
mindcreations picture mindcreations  路  3Comments
KES777 picture KES777  路  3Comments
KES777 picture KES777  路  3Comments