Body not aligned with header (I know it was already discussed)

marianopeck · October 2013

Hi guys,

First, I am now to the tool, so I am sorry if this is something noob. Thanks for doing such a great product. I hope to use it in production.
I have an app in which I use Twitter Bootstrap tables. And I have the famous problem in which body columns are not aligned with header columns. I have done EVERYTHING I found in the web. Everything. Still no luck. I am using latest DataTables from git, the bootstrap integration package, and bootstrap. I have a zip with the .css and .html with the problem. But not sure where to upload it since it has a few .css , .js and one html. I have also used the DataTables debugger, and ID is 'iqokep'.

Can I provide something else?

Thank anybody that could help me.

allan · October 2013

Please link to the page so we can see what is going wrong, at the moment I can't help, as I don't know!

Allan

marianopeck · October 2013

Hi Allan,

I thought that sending the Debug info was enough...Anyway, you can find a zip here: https://dl.dropboxusercontent.com/u/6980943/notAlignedTables.zip. You uncompress, open notAlignedTable.html and you will see the misalinged table.

Thanks!

allan · October 2013

> I thought that sending the Debug info was enough...

Unfortunately not for CSS / layout issues. Its only really use for data / misconfiguration issues.

Thanks very much for the files! I've just taken a look and unforunatenyl I can't immediately see what is causing the issue. I was going to dig a bit deeper, but that fact that it is the rendered HTML that is saved in the file, not the the plain HTML, makes that almost impossible. Are you able to also send me the raw HTML please?

Thanks,
Allan

mleejr · October 2013

I've had the same problem and noticed most of the problems are caused by a static, dom, html definition of the header with dynamic body data or vice versa. I moved my header data into my datatables definition on the ready and the problem was 'fixed'. There is still a slight event problem where I can click a button to add/remove columns (a function I did), that if you keep the same columns, actually scooches it over a few pixels on first press. Every one after that keeps the same position. Datatables has a lot of these types of issues. I had to pull my footer out for that reason. I need a dynamic footer somehow. I'm actually MAKING a row under the table, separate from the table, dynamically, because datatables has problems mixing static and dynamic data.

allan · October 2013

@mleejr - There are a lot of reasons that the columns might not align correctly. I really need tests cases to be able to say why a particular case is not working, and so I can assimilate the information and improve DataTables.

Allan

marianopeck · October 2013

Hi Allan,

First, thanks for the answer and for taking a look. Here it is the row HTML BEFORE applying the plugin: https://dl.dropboxusercontent.com/u/6980943/tableBeforePlugin.html. And here, row HTML AFTER plugin: https://dl.dropboxusercontent.com/u/6980943/tableAfterPlugin.html.

IMPORTANT: I noticed something. My webapp, has many tables, say 30. Some of them are correctly aligned and some are not. I can see that those that are misaligned are those in which either 1) I have as many columns that I need an horizontal scroll ; 2) the cell of a table is split and takes more than 1 single "row".

It looks like if the more contents/columns I have (I mean, the more tight I need to be), the most probably the body and the header will be misaligned.

I can share other tables if you want (either aligned or misaligned). Let me know if you want them or if there is anything else I can test.

Thanks!

marianopeck · October 2013

I have just tried what is recommended in http://datatables.net/forums/discussion/17859/body-columns-don039t-align-with-head-columns

but still no luck :(

marianopeck · October 2013

BTW, which JQuery version I am supposed to use? I check the website and I couldn't find an answer. Is jQuery 1.7.1 good? because that's the one I am using in my app.

Thanks!

allan · October 2013

I'm just about to fly out the door, and I'll dig into this first thing tomorrow when I get into the office, but I'd recommend jQuery 1.7+ now, since that is when the `$().on()` method was introduced.

Allan

jgoulet · October 2013

Eesh, I almost had a heart attack at work when I opened the links and saw the title of the site on the tab was XXX.

:S

marianopeck · October 2013

hehehe sorry, it was the first thing that came to my mind when i wanted to remove Client's name ;)

IMPORTANT: I was able to reproduce it and have a live example here: http://live.datatables.net/oxazuh/5/edit#source

In there, the mis-aligment is very small, but with all my css and libs it is bigger. But maybe it is a start, since it is still a bit shifted.

Thanks guys

marianopeck · October 2013

OK. And if I add the bootstrap.css, then the misaligment is way bigger, as I told you it is for my app.
Version with bootstrap is: http://live.datatables.net/oxazuh/12/edit#preview

Before you ask: yes, I tried adding the integration with bootstrap you have, but same problem. As you can see in my previous post, I can also reproduce it without bootstrap (but the misaligment is smaller).

Thanks!

jgoulet · October 2013

I put the entire bootstrap CSS in the code (as opposed to linking to it). It looks like when you remove the section:

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

the issue appears to resolve. Can you try to replicate this?

marianopeck · October 2013

Hi jgoulet, thanks for answering.
I have just tried that and what happens is that it minimizes a lot the mis-aligment. With that change, I get the "small" mis-aligment as I get without bootstrap, that is, http://live.datatables.net/oxazuh/5/edit#preview
Do you see a little mis-aligment as I do?

allan · October 2013

I suspect that is the border-collapse: collapse, but on iPad atm, so not sure! Will look into it tomorrow morning. Had thought I had a box sizing fix in my bootstrap integration file already, but perhaps not!

Allan

marianopeck · October 2013

Hi Allan. Yes, I remember seeing the border-collapse issue before opening this issue. I tried but I didn't work for me. But maybe I did something wrong.... Regarding the bootstrap integration, even if you may have fixed it, I can still reproduce the problem without Bootstrap...I would like to fix it first without bootstrap, and then start adding Bootstrap and the rest of my stuff... (my styles, etc)

Do you also see the misaligment in the link I provided? Thanks!

allan · October 2013

Wow - edit 67 on that test case - thanks both for helping me look into this issue!

---+ Border collapse:

Yes indeed, I do see the misalignment you mention! And I think it is caused by the use of border-collapse: collapse. If I set it to separate and add `cellspacing="0"` to the table, it renders correctly: http://live.datatables.net/oxazuh/67/edit .

--- Border styling:

To recreate the effect of the collapsed border, we can remove the existing border options and add:

[code]
div.dataTables_wrapper table {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
div.dataTables_wrapper table th,
div.dataTables_wrapper table td {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: none;
}
div.dataTables_wrapper div.dataTables_scrollHead table {
border-bottom: none;
}
[/code]

Result: http://live.datatables.net/oxazuh/68/edit

---+ Bootstrap:

For bootstrap, we need to add:

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

Bootstrap 3 sets all elements to be a border-box, which is excellent for easy box model calculations, but it totally destroys the column width calculations done by the browser, the above will reset the box model calculations to be the CSS standard for the table and its cells alone.

Result: http://live.datatables.net/oxazuh/69/edit

---+ Changes

I've committed the content box fix to the DataTables / Bootstrap 3 integration files:
https://github.com/DataTables/Plugins/commit/2bd1817

I've also committed that fix to the DataTables main stylesheet for v1.10 - although not directly relevant to Bootstrap perhaps, it will save some difficulties in future I'm sure:
https://github.com/DataTables/DataTablesSrc/commit/f367739

The 1.10 stylesheet already includes the border-collapse: separate setting, and the workaround to make it look like it is collapsed.

---+ Lessons

I really must get on with writing up a tech note about column alignment in DataTables! It will be in as part of the updated site with the 1.10 release...

Thanks for the help with looking into this one :-)

Regards,
Allan

marianopeck · October 2013

Thanks Allan for you help, it is very much appreciated! I am glad it helped in some way also for you.
Yes, I can confirm it is fixed. Weird, when I add all my styles, I see the widther border instead of the normal one... (like when separated but with no workaround). I will see if I can find what it is....

I had another misaligned issue but I opened another thread for that.

Thanks a lot!!!

marianopeck · October 2013

Hi Allan. I was still getting a double (widther) border with your css to simulate the collapsed... I found that I had to add a "border-right: none !important;" . So my css are now:

table.table {
clear: both;
margin-top: 0px !important;
margin-bottom: 0px !important;
max-width: none !important;
border-collapse: separate;
}

div.dataTables_wrapper table {
border-bottom: 1px solid black;
border-right: 1px solid black;
}

div.dataTables_wrapper table td {
border-top: 1px solid black;
border-left: 1px solid black;
border-right: none !important;
border-bottom: none;
}

div.dataTables_wrapper table th {
border-top: 1px solid white;
border-left: 1px solid white;
border-right: none !important;
border-bottom: none;
}

div.dataTables_wrapper table tr:hover td {
border-left: 1px solid white;
border-right: none !important;
border-bottom: none;
}

div.dataTables_wrapper div.dataTables_scrollHead table {
border-bottom: none;
}

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

Some of these, like the white and blue colors are just for my own, but the rest I think could be quite general.

Cheers

allan · October 2013

Thanks for the update!

Allan

marianopeck · October 2013

Allan,

I am trying to apply the fix of the border-collapse and the workaround so that borders do not look widther and I am failing with the usage of FixedColumns :( I tried...but my css skills are quite crappy...

I put a reproducible problem here: http://live.datatables.net/oxazoj/16/edit
From what I know, I am using latest 1.10 and latests from everything. I do include Bootstrap .css integration, dataTables.css etc.

There are basically a few issues that I cannot solve

1) Between the fixed columns (both, left and right) and the part that is next to the rest of the table (not fixed), there is a double border.

2) There is a one-pixel misaligment (horizontally) between the rows of the none-fixed cells and the rows of the fixed cells.

3) Probably because of 1) (or hopefully because of that), my right fixed column always have an horizontal scroll. No matter what width it has (I have other tables with FixedColumns), it will always have an horizontal scroll.

Do you want me to open another thread or this one is fine?

Thanks a lot in advance. If there is anything else I can do, please let me know.

marianopeck · October 2013

4) Is it normal that scrolling up/down with the mouse over the fixed column of the right breaks the aligment? you can see it in: http://live.datatables.net/oxazoj/16/edit#preview
Just go to the last column, let the mouse there, and scroll down until the very very last row... this the misalgiment appeared?

Thanks!!!

marianopeck · October 2013

Ufff... 2) becomes more important....it is not just 1 pixel misaligment...it gets way bigger as you have more rows...I have an example in which i have 270 rows and the more you scroll down, the more misalgined they are.... at the last row, the misalgiment is the height of a whole row!!!!

Any idea? :(

marianopeck · October 2013

Just to make clear. All those problems ( mostly 2) ) are with FixedColumns. I guess I need to apply all the border collapse fixes to the css of the FixedColumns wrapper tables...but I failed :(

allan · October 2013

Hmm - that's quite nasty. I'm going to have to spend a bit of time and dig into these issues I'm afraid - I don't have an immediate fix. Unfortunately its likely to be a busy weekend and start of next week, so it will probably be towards the end of the week before I can really sit down and get to grips with it, but I'll try to make some time before then.

Allan

marianopeck · October 2013

Hi Allan, Don't worry, I understand and appreciate all your efforts for this project. Just to be sure, could you confirm me that you could see the problems in the links I sent?
Maybe I will put the DataTables in production (in my system) but not using FixedColumns and then as soon as I have that I put it.
Anyway, have a nice weekend, and thanks for your support. If there is anything I could help, let me know.

Best,

allan · October 2013

> Just to be sure, could you confirm me that you could see the problems in the links I sent?

Yes indeed (unfortunately ;-) ). Thanks for the test cases - its a massive help!

Allan

marianux · November 2013

Hi,
i got the same problems.
Have you found a fix for this problem?
Thanks in advance.

allan · November 2013

@marianux - Please link to a test case as noted in the forum rules.

Allan

madanner · December 2013

Hello Allen... I am not sure if I'm having the same problem, but it certainly seems related.

I've been searching through various threads on column alignment problems, FixedColumn problems and Bootstrap problems, and this one seems to cover all of it. I’m still having trouble with header column alignment so I thought I’d provide some examples.

I’m using Bootstrap 3 and FixedColumns, and I’ve played with varying values with sScrollXInner (including leaving it out) and the columns don’t still don’t line up properly.
Also, three problems seem to crop up related to the FixedColumn:
1) Some initial screen sizes (and re-sizes) produce column 2 too narrow, cutting off space to the left of it. The X scrollbar doesn’t appear and allow for movement.
2) Sometimes (when initial screen size is small) the first column has a scrollbar in it. Would nowrap only on this column fix it? If so, are there options to specify that behavior?
3) Sometimes (when initial screen size is large) an extra empty column (which is probably the right portion of the underlying first column) appears between the first and second columns.

Using DataTables 1.9.4:
http://jsfiddle.net/6xEy3/2/

Using this version, to compensate for header miscalculation (gleaned from a few threads on the topic), I can remove the padding and add a span to the header text. But this creates its own set of problems when header text wraps and the FixedColumn problem persists.
http://jsfiddle.net/HDYK6/2/

And finally, moving up to the 1.10-wip version and adding in the Bootstrap integration files (and CSS for FixedColumn), I get a better result in header alignment in this example (with spans and padding fix taken back out):
http://jsfiddle.net/7FFCp/3/

The 1.10 is fine, but:
1) My project goes into production in February and I’m not sure I want to include a nightly library, do you think you’ll have the 1.10 release out before then?
2) Still having the strange FixedColumn problem.

Help is greatly appreciated.

Body not aligned with header (I know it was already discussed)

Body not aligned with header (I know it was already discussed)

Replies

Howdy, Stranger!

Categories

DataTables

Body not aligned with header (I know it was already discussed)

Body not aligned with header (I know it was already discussed)

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables