Rendering issue

582 views
Skip to first unread message

TableGuy

unread,
Sep 1, 2014, 1:12:14 PM9/1/14
to handso...@googlegroups.com
I have the following code...when I see the page in browser, the table shows with two rows of column headers one above the other until the div (#errormessage) is faded out. Does any know what the reason is or how to fix it?

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>HandsonTable Prototype</title>
<script data-jsfiddle="common" src="js/jquery-1.10.2.js"></script>
<script data-jsfiddle="common" src="js/jquery.handsontable.full.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen"
href="js/jquery.handsontable.full.css">
</head>
<body>
<h1>First Example</h1>
<div id="example1console"></div>

<div id="errormessage" style="display:none;">Some message</div>
<div id="example1"></div>
<script>
var $container = $("#example1");
var $parent = $container.parent();

$container.handsontable({
data : [
{
"id": "53e7992f70f35e0e3c0863cd",
"Years": 0,
"firstname": "Winters",
"lastname": "Evans"
},
{
"id": "53e7992f81975470e5f43b63",
"Years": 5,
"firstname": "Dianna",
"lastname": "Thornton"
},
{
"id": "53e7992feb82d19b5633abff",
"Years": 1,
"firstname": "Hebert",
"lastname": "Horton"
},
{
"id": "53e7992f2c9ccdcf3826123b",
"Years": 4,
"firstname": "Horton",
"lastname": "Roman"
}
],
colHeaders : [ 'ID', 'Years', 'First Name', 'Last Name' ],
rowHeaders : true,
minSpareRows : 1
});

$("#errormessage").show(0).delay(5000).fadeOut(2000);

</script>
</body>
</html>

pillar...@gmail.com

unread,
Sep 1, 2014, 3:54:24 PM9/1/14
to handso...@googlegroups.com


Here is what I see in the DOM tree: One can see the repetition of the table in the DOM. This seems to be a bug.:

Here is what I see in the DOM tree. The table is getting repeated. This seems to be a bug:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>HandsonTable Prototype</title>
<script data-jsfiddle="common" src="js/jquery-1.10.2.js"></script>
<script data-jsfiddle="common" src="js/jquery.handsontable.full.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen"
href="js/jquery.handsontable.full.css">


</head>
<body>
<h1>First Example</h1>
<div id="example1console"></div>

<div id="errormessage" style="visibility: visible; display: none;">Some
message</div>
<div id="example1" class="handsontable">
<div class="htContainer">
<div class="wtHolder ht_master"
style="position: relative; height: 145px;">
<div class="wtHider" style="position: relative; top: 0px;">
<div class="wtSpreader"
style="position: relative; width: auto; height: auto;">
<table class="htCore">
<colgroup>
<col class="rowHeader">
<col style="width: 192px;">
<col style="width: 50px;">
<col style="width: 78px;">
<col style="width: 77px;">
</colgroup>
<thead>
<tr>
<th><div class="relative">
<span class="rowHeader">&nbsp;</span>
</div></th>
<th><div class="relative">
<span class="colHeader">ID</span>
</div></th>
<th><div class="relative">
<span class="colHeader">Years</span>
</div></th>
<th><div class="relative">
<span class="colHeader">First Name</span>
</div></th>
<th><div class="relative">
<span class="colHeader">Last Name</span>
</div></th>
</tr>
</thead>
<tbody>
<tr>
<th><div class="relative">
<span class="rowHeader">1</span>
</div></th>
<td class="">53e7992f70f35e0e3c0863cd</td>
<td class="">0</td>
<td class="">Winters</td>
<td class="">Evans</td>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">2</span>
</div></th>
<td class="">53e7992f81975470e5f43b63</td>
<td class="">5</td>
<td class="">Dianna</td>
<td class="">Thornton</td>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">3</span>
</div></th>
<td class="">53e7992feb82d19b5633abff</td>
<td class="">1</td>
<td class="">Hebert</td>
<td class="">Horton</td>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">4</span>
</div></th>
<td class="">53e7992f2c9ccdcf3826123b</td>
<td class="">4</td>
<td class="">Horton</td>
<td class="">Roman</td>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">5</span>
</div></th>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>
</tbody>
</table>
</div>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: red;"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(137, 175, 249);"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(82, 146, 247);"></div>
</div>
</div>
</div>
</div>
<div class="ht_clone_top handsontable"
style="position: fixed; overflow: hidden; top: 100px; width: 447px; height: 30px;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider" style="position: relative;">
<div class="wtSpreader"
style="position: relative; width: auto; height: auto;">
<table class="htCore">
<colgroup>
<col class="rowHeader">
<col style="width: 192px;">
<col style="width: 50px;">
<col style="width: 78px;">
<col style="width: 77px;">
</colgroup>
<thead>
<tr>
<th><div class="relative">
<span class="rowHeader">&nbsp;</span>
</div></th>
<th><div class="relative">
<span class="colHeader">ID</span>
</div></th>
<th><div class="relative">
<span class="colHeader">Years</span>
</div></th>
<th><div class="relative">
<span class="colHeader">First Name</span>
</div></th>
<th><div class="relative">
<span class="colHeader">Last Name</span>
</div></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: red;"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(137, 175, 249);"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(82, 146, 247);"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ht_clone_left handsontable"
style="position: fixed; overflow: hidden; left: 8px; top: 100px; height: 142px; width: 54px;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider" style="position: relative;">
<div class="wtSpreader"
style="position: relative; width: auto; height: auto;">
<table class="htCore">
<colgroup>
<col class="rowHeader">
</colgroup>
<thead>
<tr>
<th><div class="relative">
<span class="rowHeader">&nbsp;</span>
</div></th>
</tr>
</thead>
<tbody>
<tr>
<th><div class="relative">
<span class="rowHeader">1</span>
</div></th>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">2</span>
</div></th>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">3</span>
</div></th>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">4</span>
</div></th>
</tr>
<tr>
<th><div class="relative">
<span class="rowHeader">5</span>
</div></th>
</tr>
</tbody>
</table>
</div>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: red;"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(137, 175, 249);"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(82, 146, 247);"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ht_clone_corner handsontable"
style="position: fixed; overflow: hidden; top: 100px; left: 8px; width: 54px; height: 30px;">
<div class="wtHolder" style="position: relative;">
<div class="wtHider" style="position: relative;">
<div class="wtSpreader"
style="position: relative; width: auto; height: auto;">
<table class="htCore">
<colgroup>
<col class="rowHeader">
</colgroup>
<thead>
<tr>
<th><div class="relative">
<span class="rowHeader">&nbsp;</span>
</div></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill"
style="height: 1px; width: 1px; display: none; background-color: red;"></div>
<div class="wtBorder fill corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: red;"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area"
style="height: 1px; width: 1px; display: none; background-color: rgb(137, 175, 249);"></div>
<div class="wtBorder area corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(137, 175, 249);"></div>
</div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current"
style="height: 2px; width: 2px; display: none; background-color: rgb(82, 146, 247);"></div>
<div class="wtBorder current corner"
style="height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none; background-color: rgb(82, 146, 247);"></div>
</div>
</div>
</div>
</div>
</div>
</div>

$("#errormessage").show(0).delay(5000).fadeOut(2000);
</script>
<div id="CopyPasteDiv"
style="position: fixed; top: -10000px; left: -10000px;">
<textarea class="copyPaste"
style="width: 10000px; height: 10000px; overflow: hidden; opacity: 0;"></textarea>
</div>

</body>
</html>

trebuchetty

unread,
Sep 3, 2014, 11:35:25 PM9/3/14
to handso...@googlegroups.com, pillar...@gmail.com
This is the latest handsontable code isn't it?
That second table, if you look carefully, is fixed positioned. So I'm guessing that second set of headers is actually the "new" header/scrollbar feature so that when you scroll, the headers stay visible instead of going off the screen.
I personally haven't had much luck with those headers, so I've refused to update my version of handsontable to the latest. I'm guessing that if you remove the error messge div, it'll probably work ok. Maybe put that somewhere else? I'm partial to Bootstrap Growl for showing error messages and such, but that's just me.

Matt Vagnoni

unread,
Sep 6, 2014, 1:10:06 AM9/6/14
to handso...@googlegroups.com, pillar...@gmail.com
I noticed some stuttering happening with the sticky headers when you alter the dom.  For example, when i was showing error messages etc that changed the number of lines.  I just tossed a re-render in there and it went away. I'm moving away from messing with the dom before where handsontable is.  I might look at growl, that sounds interesting. 

                                         &

...

nafto...@gmail.com

unread,
Oct 29, 2014, 11:35:06 PM10/29/14
to handso...@googlegroups.com, pillar...@gmail.com
What version introduced the DOM duplication? Has it been fixed? I seem to have the issue too.
Reply all
Reply to author
Forward
0 new messages