Header misalignment question

s3test · May 2016

I have a DataTable with scrollY and scrollX. Everything works great, and all headers align with the table cells. Wanting a little styling, I have added a 1px border to the dataTables_scroll class that wraps the entire table. This, too, works fine. However, once I add that border, depending on the content and/or width of the columns, a header or two becomes misaligned with its respective column by a single pixel. It is sometimes pushed to the left, and sometimes to the right. Redrawing the table doesn't fix it. But if I remove that border, all is well.

How can I keep the border while having the columns align properly?

s3test · May 2016

It seems that the problem actually resides with the addition of "style="width: 100%"" to the HTML of the table. I do want the table to expand to the size of its container, but the 100% must be throwing off the calculations.

Any help?

jr42.gordon · May 2016

Make sure following styling is not being overwritten

table.dataTable, table.dataTable th, table.dataTable td {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

s3test · May 2016

Those styles are in use, and I made sure that they were not being overwritten. Thanks.

The problem is most apparent in IE (I'm running IE11). If I remove the width declaration from the table HTML, then everything aligns perfectly. The only problem is that if my table is not wide enough to need all the space, I get a large blank area between the table and the scrollbar (for scrolly). Also, the border I am applying to the table extends out to the scrollbar which also makes it look funky.

I tried removing the width declaration from the table HTML and applying "scrollXInner": "100%", but I get the same misaligned header that way. In fact, it seems as though they are misaligned exactly the same.

Any other ideas?

jr42.gordon · May 2016

Keep width declaration on table, but add https://datatables.net/reference/option/autoWidth to DataTable configuration

s3test · May 2016

Unfortunately, the autoWidth didn't help in IE regardless of its setting. Firefox looks great.

I found that if I change the width declaration on the table to min-width, I get aligned column headers. The issue with that is that no matter how many columns I hide, I always have a horizontal scrollbar.

The amount of the scroll seems to coincide with the number of borders. In other words, if there are 5 columns (4 borders), it seems to scroll 4 pixels. If there are more columns, it scrolls more (less if less columns). Following that logic, I have checked all the border-collapse properties and box-sizing properties, but they don't seem to help.

Thanks for the help thus far. Any other thoughts or suggestions?

s3test · May 2016

So, I changed the width declaration to min-width, and set it to 99%. This makes the headers align correctly in all browsers.

There is one side effect of this that I do not like... There is a blank space (the remaining 1%) on the right of the table just before the vertical scroll bar. I can style the color of it by setting the background-color property of .dataTables_scroll, but it is still sub-optimal.

Choices being that blank space or misaligned headers, I will choose the blank space every time. I just wish I could have my cake and eat it too!

jr42.gordon · May 2016

I know there are some built in styling options you can add, but once you get into adding your own styling on top it, DataTables can start to experience "odd" behavior.

The only way we could help you would be to link to an example so that we can debug.

s3test · May 2016

Hi. I have created a fiddle to demonstrate the header alignment problem:

https://jsfiddle.net/tLpx9vof/4/

It works fine in Chrome and Firefox, but in IE, there are headers that are misaligned. These headers are only off by a pixel or two, but it is driving me crazy. Also, in the actual environment that I am working in, they are off by up to 10 pixels at times where there are 50 or so columns.

Make sure that the viewport is small enough to only have about 10 columns shown. If it stretches out to where there is no horizontal scrolling necessary, it works fine.

Also of note is that if you change the width declaration of the table tag to read "style="min-width:99%;"" the alignment problem goes away. Unfortunately, that extra 1% is an ugly break between the table and the vertical scrollbar (which can be seen by stretching the viewport out considerably).

Here is another fiddle where the columns seem to line up perfectly until the very last pixel of horizontal scrolling. At that last pixel, the table still moves left one pixel, but the header remains stationary (resulting in all headers being off by one pixel). This is a stripped down version, and there are absolutely no styles applied to this fiddle, so I am hoping that you might be able to find the answer to the problem. Again, it is only occurring in IE.

https://jsfiddle.net/369ank54/1/

My IE version is 11.0.9600.17358
I am running Windows 7

Thanks so much for your help!!

s3test · May 2016

Hello again,

I have also noticed that if the data in a <td> is wider than the data in a <th>, the header becomes misaligned. This may help shed some light on what is going on.

Fiddle to demonstrate:
https://jsfiddle.net/nqvLfrte/

jr42.gordon · May 2016

The example you linked doesn't show the misalignment bug. More than likely you have some styling that is overriding DataTables styling. Another thing you can do is call the following piece of javascript which will attempt to realign the columns

dt.columns.adjust();

s3test · May 2016

Hi. Thanks for looking at the fiddles. Did you look at them in IE? Using FireFox and Chrome, everything works great. The problem only appears when rendering in IE. I double-checked this over the weekend on multiple boxes running IE 9 and IE 11. The header misalignment issue appeared under each test condition.

Also, as you can see in the last two fiddles I linked, there is no styling being used at all, so I don't believe that css could be causing the issue. Again, it is just an IE problem, and I would think that if it was due to a styling issue, it would be apparent in all major browsers.

Thanks again for taking the time to help.

jr42.gordon · May 2016

I pulled it up in IE11 and the misalignment is there but slightly. Perhaps a pixel. Since Microsoft doesn't like to follow normal Javascript and CSS standards like the rest of them do, I am not surprised.

Hopefully @Allan can shed light on this.

s3test · June 2016

Indeed! I always design for FireFox/Chrome and then hack for IE. Terrible! Unfortunately, this is a situation where the vast majority of my users will be running IE.

You are correct about the fiddles showing the alignment being only slightly off. However, when using real headers and real data (as well as having nearly 60 columns), that slight misalignment adds up to be 10 or more pixels in some cases.

Thanks so much for taking the time! Like you said, hopefully @Allan can take a look.

allan · June 2016

I'll try to take a look, although it will probably be next week I'm afraid.

Allan

s3test · June 2016

@Allan, that would be absolutely fantastic! I totally understand that you are busy, and any chance you got to investigate this would certainly be appreciated.

Thanks a million!

s3test · July 2016

Hi @Allan,

Just curious if you have had a chance to look into this issue.

Thanks!

allan · July 2016

Not yet - sorry. Its on my todo list, but rather bogged down with support requests at the moment I'm afraid!

Allan

s3test · July 2016

No problem. Thanks a lot!

s3test · November 2016

Hi @Allan,

I hate to bother you, but was just wondering if there had been any progress on this issue?

Thanks!

allan · November 2016

Not yet - sorry! I've been pulled away on other things and just getting back up to speed now and working my way through the list of tasks :-).

Allan

Header misalignment question

Header misalignment question

Answers

Howdy, Stranger!

Categories

DataTables

Header misalignment question

Header misalignment question

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables