Problem when container has display: scroll !important;

[gvenegas-1aauto]

Please help me help you by providing the following information with your issue:

• browser name/version: Firefox 45.0 and chrome (chromium Version 48.0.2564.116 Ubuntu 15.10 (64-bit))
• OS name: Ubuntu 15.10
• jQuery version if not latest: "1.11.3"
• floatThead version if not latest: 1.2.10
• jsfiddle that reproduces your issue in its simplest form possible: https://jsfiddle.net/an7952cn/1/

Thanks a lot for this great plugin. I have recently started working on a laravel project that uses floatThead and I have found that the header width won't match the table whenever the display:scroll is set in the wrapper (container) div. This attribute is set as !important, I believe that it has to do with bootstrap. I have tried several things to fix this but I'm unable to. I tried to reproduce this in a smaller scale but wasnt able. I creataed the js fiddle to see if you can help me.

Thanks!

[mkoryak]

Sorry, didnt see this issue until just now.

There is a problem with your jsfiddle. you pasted the generated source code instead of the original. The floatThead markup is already in there, see:

https://jsfiddle.net/an7952cn/3/

[gvenegas-1aauto]

I was out on vacation and I just read this post. We are using this code in a laravel (php) project. It was easier for me just to get the generated html files to replicate the error. let me try to create a different fiddler with the code before the floatThead markup. thanks.

[mkoryak]

Heh, I can see that there is an issue but have no way to debug it since my plugin isn't running

[gvenegas-1aauto]

I have created a new jfiddler with the correct code in it, (https://jsfiddle.net/an7952cn/5/) however it seems that the javascript function is not working properly because I don't see the floatThead when scrolling the list. this only happens in jfiddler, in our app it shows. one thing I have noticed is that the header shows correct when the table has a lot of records. if the table has few rows that is when the header shows wrong.

[mkoryak]

you were missing jquery and floathead js. i added them and I dont see any problems here:

http://jsfiddle.net/an7952cn/8/embedded/

perhaps it is because i am on a mac and it has transparent scrollbars. can you see if you can reproduce your issue on IE, since it has non-transparent scrollbars and I have access to that for debugging

[gvenegas-1aauto]

Hello, and thanks for your help and your swift response.

I can see that the fiddler is fine now in my side, however it only works when a lot of rows are present in the table. I modified the fiddler, just by removing rows and leaving just one. In mozilla firefox, whith this change, it now shows an overlap in the header over the scroll bar, same happens in chrome (both browsers in ubuntu) and I also tested in internet explorer with the same reslts. would you please validate if you get this in mac os now that it has less rows?

thanks in advance for your help in this matter.

https://jsfiddle.net/an7952cn/9/

[mkoryak]

So the good news is that it was a bug and i fixed it, the bad news is that I did a release yesterday and wont do one again so soon. You will have to find a way to use the code from master

[mkoryak]

say hi to Scott MacPhee for me if you know him :)

[gvenegas-1aauto]

I'm fairly new in the company but I will let him know you say hello. Thanks a lot for all your help, I will try to use it or wait for next release.

Thanks !!!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.