Urgent Help! scrollX and JQuery UI together is broken?????

UPEngineer

Hello,

I have noticed that if I use the scrollX function of datatables along with a jquery ui theme, the scrollable header extends beyond the width of the table instead of scrolling. I noticed another post about this as well.

If I disable jquery ui using "bJQueryUI": false, the scrollbar functions normally. I have looked at the classes using firebug in firefox with both jquery ui enabled and jquery ui disabled and I cannot find what is causing this to happen.

Anyone have a solution???

Oh, one other thing that I should mention is that it is only broken in IE6 and IE7. It works with jquery ui enabled in IE8, FF, and Chrome.

So it is something that IE6 or IE7 doesn't like.

I would attach a pic of what I am talking about, but can't figure out how to attach a pic LOL

UPEngineer

OK, I have done some more testing on this.

If I remove the jqueryui.css file but leave everything else the same, the problem still persists. I figured by doing this, I would remove any css problem that is causing this messed up look.

If I leave "bJQueryUI": true in my datatables declaration, the table does not display right in IE6 or IE7.

If I put "bJQueryUI": false or leave it out completely, it works fine in IE6 & IE7 as intended, just without the JQuery UI "look"

So the way I figure is something in the datatables source code is breaking the scrollX function with jqueryui set to true, I just can't find what it is doing or why it is doing it.

I have looked at firebug with jqueryui enabled and disabled and the only thing I can see CSS wise is just the jqueryui definintions and no other oddities.

Here is a screenshot on what I am talking about:

http://upengineer.org/table.gif

AndzinSan

Hi, this problem have same resource as I wrote in this topic: http://datatables.net/forums/comments.php?DiscussionID=3104&page=1#Item_3
It is because if you set bjQueryui: true, there is two tables, first is used only with th elements for table heades and second with both - th and td - for headers (height is 0px) and for body. This is for correct view in scrolling y-axis. Without this, if you scroll y header will by scrooled too. So i thing this solution is "more beautiful". In actual source is not a way how to fix it only with configuration combinations, you have to do some hard code hack to hardly set width of columns in both tables.

Look at the topic in link, 3rd post is way how to fix this problem, but be carefull, it may damage your table. In this code hack it works, but you must for each column specify width with sWidth: "some px". Now there is still one problem, if your content of table cell is bigger than specified width body table columns will be automaticaly oversized, but header table cells not. This you can fix with oversizing sWidth setting or with css:

.dataTables_scrollBody tbody td, .dataTables_scrollHeadInner thead th div{
overflow-x: hidden;
width: inherit;
}

I hope this will help you.

AS

UPEngineer

This actually makes sense as I was having some other problems with this as well. If I set the scrollx and sScrollXInner just like examples, then my table would really extend beyond where I wanted it to, but the table headers would not scroll.

Hopefully Alan can come up with a more permanent fix in the core components to keep from hacking it and break something else.

Thansk

UPEngineer

Thanks to your comments AndzinSan, I completely missed this when I was looking through the html output in firebug.

bJqueryUI:true adds the Datatables_sort_wrapper class to the table headings.

If I delete the CSS definitions for Datatables_sort_wrapper, then the tables appear to work as intended in both IE6 & IE7 as well as browsers that it worked in all along, albeit the sort icons are misaligned and not looking correctly.

Now all that I need to to is what CSS hack would apply to make them appear correctly in all browsers.

Will let all know what I find.

Scott

UPEngineer

Well I give up!

I have narrowed the issue to these two css code lines:

[code]
table.allclaims thead th div.DataTables_sort_wrapper {position: relative; padding-right: 20px;padding-right: 20px;}
table.allclaims thead th div.DataTables_sort_wrapper span {position: absolute;top: 50%;margin-top: -8px;right: 0;}
[/code]

If I take out the position: relative in line #1, it works great except the icons are shown half-way down the table to the right as it should by the absolute positioning in line 2.

If I take out the absolute positioning in line 2, it breaks again.

I have tried every combination of floats, positions, clears, etc. I can think of but cannot get this to work!!!

Any CSS gurus out there?

I have to fix it for IE6 because I still have a lot of users using IE6 and half of those didn't know there were upgrades to IE or there were other browsers :)

Any help is appreciated

AndzinSan

Write a JS script whith inform your users who have IE6 that this is old and insecure and recomend them to download and install google chrome, otherwise they will not have access to site. On my sites this solution solve this problem in one month, 97% of users upgrade IE6 do Chrome. Better sollution, I think ;).

allan

So the positioning of the sorting icon is effecting the overflow of the header tables' parent!? If you remove the position: relative, it will show the elements even although they should be hidden... hmmm - damn IE6 :-(. I'm afraid I don't have access to an IE6 machine right at the moment, although I'll check in the morning.

I would have thought that something like this would do the job:

[code]
div.dataTables_scrollHead {
overflow: hidden;
zoom: 1;
}
[/code]
But perhaps IE6 is allowing the hidden elements with a position of relative or absolute (or a relative with a child absolute!) to be shown... That would be very annoying :-(.

Allan

UPEngineer

Allan,

I really don't know what is affecting what LOL.

Here is what I do know.

If bJQueryiu is set to true then it adds the Datatables_sort_wrapper divs.

This is the css definitions I have for it:
[code]
table.allclaims thead th div.DataTables_sort_wrapper {position: relative; padding-right: 20px;padding-right: 20px;}
table.allclaims thead th div.DataTables_sort_wrapper span {position: absolute;top: 50%;margin-top: -8px;right: 0;}
[/code]

It looks good in chrome, FF, and IE8 just like this.

However, in IE6 and IE 7, I am assuming they are the hidden fields I believe extend beyond the edge of the table.

Also, the header does not scroll with the table.

If I remove the position: relative from the equation, it displays correctly in all versions of IE as FF and chrome and it even scrolls as it should.

BUT, the icons are now displayed halfway down the table all the way to the right side, just as the position:absolute puts it there.

I have messed with every iteration I can think of with these css declarations and even added another position:relative to a parent container thinking it was an IE6 positioning bug that I have read about.

I have messed with widths, heights, auto this and auto that with no luck.

Since it renders correctly in some browsers, there has to be a trick or hack to make it work in others (I would like to believe).

Anyways, any help you could give would be appreciated.

BTW, I tried the code you just posted above with no luck. I am looking through my CSS and firebug to make sure I don't have another overflow:visible or scroll somewhere that is overriding the hidden attribute.

Scott

UPEngineer

Well I figured it out for anyone else that is having this problem (so far it looks good I should say)

I tried every iteration of what code snippet Allan posted earlier with no results.

After looking over the internet about CSS overflow hidden issues I found something I tried.


This is what I came up with to work;

[code]
div.dataTables_scrollHead {
overflow: hidden;
position: relative;
}
[/code]

Adding the position: relative did the trick!

I had that earlier but did not have overflow:hidden on the scrollHead div.

Anwyays, anyone having this problem, give this a try!

Scott

allan

Thanks for following up on this - it's interesting that your solution works. DataTables automatically applies overflow = hidden (the line: nScrollHead.style.overflow = "hidden";), so that shouldn't be needed! I'll give it a go with having DataTables automatically add the position: relative as well. If that fixes it, I'll commit it to the tree.

Allan

UPEngineer

Allan,

You know I didn't try it without the overflow:hidden. I just had it in there from the code you provided earlier.

I just tried it with and without the overflow:hidden and it works just fine either way.

The position:relative is the key and won't work without this line.

Since the overflow: hidden is already provided, it is probably redundant to include it again.

I will test more, but so far it appears to have done the trick with just one line of css definition.

Thanks for your help!!!!

Scott

allan

Hi Scott,

Sorry for the slight delay on this - I was working on a different issue in DataTables and didn't want to cross commit. However, I've confirmed the issue and your fix (nice one!) and applied it to DataTables natively. This will be included in the next release, but you can get the development version from the "nightly" part of the downloads page and it includes this fix: http://datatables.net/download/ :-)

Regards,
Allan

polskikrol

Firstly, excellent addition to JQuery/UI which is quite powerful. Many thanks for the work on this.

Posting on this thread as I have the same problem as mentioned above regarding the use of sScrollX and having the tbody scroll properly but thead just stayes in place and get disaligned from the tbody.

Using DataTables 1.7.5 and the following are my settings:
'sScrollX': '100%',
'sScrollXInner': '100%',

It is important to note that the table headers and data are generated dynamically and returned arrays applied to aoColumns and aaData. For the case of redraws, 'bDestroy': true has also been set.

Looking at the css, it definitely has to do with the 2 separate divs and one set to 'overflow' and the other set to 'hidden' with the tbody having no hard set columns widths set and the thead having hard set column widths.

Spent some time trying to hack code on the back end and trying various combinations of scroll options, to no avail. The option 'sScrollX' is currently commented out so that the thead and tbody resize until they scroll off the page out of view when adjusting browser size.

allan

Why the 'sScrollXInner': '100%' option? This will just set the table width to be the same size as the container - i.e. no scrolling, which probably isn't what you want, and likely the root of the misalignment (forcing the table to be smaller than actually works). If you remove that line, does it work okay? With it in, you should get a message on the console saying what the issue is.

Allan

ORDEngineer

Hi polskikrol,
Did you find the solution to your problem? I am also having same problem. While defining 'sScrollX': '100%', table alignment get messed up.

allan

Can you link to a test page showing the problem please?

Allan