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.

Progressbar breaks the height

See original GitHub issue

Describe the bug Adding “progress” as a formatter breaks complete the height!

Tabulator Info 4.2

Working Example I used just the example from your documentation.

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>

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


<script>
  //define some sample data
 var tabledata = [
 	{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
 	{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
 	{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
 	{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
 	{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];
  //create Tabulator on DOM element with id "example-table"
  var table = new Tabulator("#example-table", {
   	height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
   	data:tabledata, //assign data to table
   	layout:"fitColumns", //fit columns to width of table (optional)
   	columns:[ //Define Table Columns
  	 	{title:"Name", field:"name", width:150},
  	 	{title:"Age", field:"age", align:"left", formatter:"progress"},
  	 	{title:"Favourite Color", field:"col"},
  	 	{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
   	],
   	rowClick:function(e, row){ //trigger an alert message when the row is clicked
   		alert("Row " + row.getData().id + " Clicked!!!!");
   	},
  });
</script>

tabulator

Issue Analytics

State:
Created 4 years ago
Comments:37 (15 by maintainers)

Top GitHub Comments

10reactions

olifolkerdcommented, Nov 9, 2019

@abrownsword

Perfect! I know exactly what your issue is, Thanks for sending that over!

The problem is you are missing the doctype declaration at the top of your file so the browser isn’t interpreting the page contents as HTML5.

You need to add the following as the first line in your file:

<!DOCTYPE html>

As a rule that should always be the first line in any HTML file you produce. This Article explains a bit more about doctype and why it is needed. Essentially if you don’t define the doctype, the browser enters quirks mode and tries to interpret it as a bit of HTML from the early 90’s which can result in all sorts of random behaviour.

I hope that helps,

Cheers

Oli 😃

1reaction

abrownswordcommented, Nov 9, 2019

Thanks for the tips.