Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / [xTableHeaderFixed] Scrollbars and small windows

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

  • Index
  •  » X Library
  •  » [xTableHeaderFixed] Scrollbars and small windows

#1 January 15, 2010 12:42:49 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

[xTableHeaderFixed] Scrollbars and small windows

In all browsers that I've tested (IE7, IE8, Firefox, and Chrome) I've found that if the window containing a xTableHeaderFixed table becomes small enough to have horizontal and vertical scrollbars that some strange behavior happens.

Here's what the page looks like before scrolling, where everything appears normal:

http://www.dmi.illinois.edu/temp/small_ … scroll.jpg

Here's what happens if you scroll just a bit vertically without scrolling all the way to right horizontally... the scroll bar disappears under the header!!

http://www.dmi.illinois.edu/temp/small_ … issing.jpg

If you scroll vertically more than just a little bit, enough to clear the header, then the scrollbar reappears:

http://www.dmi.illinois.edu/temp/small_ … ppears.jpg

Maybe the scrollbar has to be taken into account in some of the calculations?

This is not a showstopper, and I promise this is the last post about xTableHeaderFixed problems for a while. All in all, it's fantastic!

Offline

 

#2 January 16, 2010 11:27:35 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Yes, the fixed header is on top of the scrollable container - it is not inside it. But, looking at your images I just had an idea and it might be fairly simple. When setting the width of the fixed header it needs to use the inner width of the container if that value is less than the main table's width.

You are not posting too much - in fact I really appreciate the interest and feedback. Sometimes it takes me a bit to get around to replying, but I am very glad to have you participating. smile

Offline

 

#3 January 16, 2010 11:30:22 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

No, that won't work - that would make the columns be different widths than the main table. I just woke up so I'm a little slow right now wink

I'll keep it in mind and we'll come up with some other way to handle this.

Offline

 

#4 January 20, 2010 11:41:08 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

The only idea I have right now is for the header table to be contained in a div. The div would be sized to fit the static table's container's inner width and so the div would "clip" the header table. Just a thought. I'll be coming back to this issue soon.

Offline

 

#5 October 29, 2010 12:43:44 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

Hi Mike,

Just following up on this issue also. Any progress on this? I'd rate this as the top bug I'd like to see fixed in xTableHeaderFixed. It makes the fixed table very hard if the table doesn't fit in the browser window upon initial load due to a small screen resolution (like on a mobile device) or if a user resizes the window and the table no longer fits on a high-res screen. Thanks again for all the hard work you've put into this! I've tried all of the other libraries and CSS-based solutions out there, and your implementation is by far the best!

Offline

 

#6 November 2, 2010 1:35:17 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Hi theseeker,

I'm testing a possible fix for this issue. Have a look at the demos. I'm clipping (using style.clip) the header-table to make it fit within the table's parent.

Thanks!

Offline

 

#7 November 3, 2010 9:36:36 am

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

Yes, this seems to fix the problem on IE7/8, Chrome, and Firefox... basically every browser that I have here! Thank you so much! I have your "beta" version of this in production here now, I'll let you know if any issues come up.

Also, I have to tell you that I scoured the web looking for the best fixed table header solution out there. The CSS solutions, although elegant, did not work well with all browsers and were too limiting in other regards. The jquery-based solutions that I tried out were half-baked (http://fixedheadertable.com/ was the best of the lot, but it looks like the developer is M.I.A. since June, and there are still lots of major bugs to work out). This is by far the best thing going for fixed table headers! Thank you again for all of the work you've put into it.

Offline

 

#8 November 3, 2010 10:01:42 am

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

Ok, I did fine one small issue on my implementation of the new code.

In IE7/8 and Firefox, my table header now "jumps" when scrolled. I don't really know how to describe this well. Here's the page in question: http://www.dmi.illinois.edu/cpdev_redesign/. The table header stays put in Chrome.

I remember this happening with a previous release of the library also, but I cannot remember which version it was. It was one of those things that got magically fixed somewhere along the way.

I'm guessing this issue may have something to do with the way I'm calling the library in my code. I'm using AJAX in ASP.NET, and here's how I call xTableHeaderFixed:

<script type="text/javascript">
    var myTable = new xTableHeaderFixed();

    function pageLoad(sender, args) {
        myTable.init('xthf', 'content');
    }   
</script>

That code is mostly yours from a previous thread, and it has worked fine for a long time. If I have to trade table "jumping" for correct resizing, I'm happy to do that, but any quick thoughts on what might be causing this are appreciated. Thanks.

Offline

 

#9 November 3, 2010 2:18:50 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Thanks so much for the help! It's great to hear that xTableHeaderFixed is perhaps the best in its class - awesome!

I visited your page. Very nice! I notice the "jumping". It seems that the real header scrolls up, the white background shows, and then the fixed header is shown - but not quick enough. I don't think it is related to the ajax update. I see the "jump" just when scrolling from the top. The clipping may make the rendering slower - not sure - but this is something to investigate.

I also see that the fixed header is not quite clipped properly on your page - it covers part of the scrollbar (only viewed it with Firefox so far). I'm afraid this is going to be very dependent on the table's containing element(s). I still have several ideas to test. For example, currently I'm taking the the parent's padding into account, but not considering the table's margins.

Offline

 

#10 November 3, 2010 2:30:49 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Currently it positions the fixed header then does the clipping. I wonder if it would be better to do the clipping first, then move the fixed header into view? I'll experiment with this.

Offline

 

#11 November 3, 2010 2:39:19 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Forgot to mention this altho I'm sure you've seen it... I have a debugging statement that displays values on the status bar. Comment that out before using it in production.

Offline

 

#12 November 3, 2010 3:21:54 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Hmmm. Maybe this is related to the y-offset feature... but you're not using that are you?

Offline

 

#13 November 3, 2010 7:51:07 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

After playing around with it I realized (or at least I think I did) that the clipping feature is not needed if the container is the window object. In this case the window will do the clipping. If, as in my demo 1, table 2, the table is wider than its parent yet the parent has overflow:hidden then the table is useless that way and that page would need to be redesigned anyhow. If anyone has a scenario where this clipping feature would be needed when the container is the window then please jump in here.

Offline

 

#14 November 4, 2010 11:16:19 am

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

I don't have a need for the clipping feature when the container is the window object. It seems like the resizing works fine in that case, so it doesn't seem needed.

However, I am very grateful to have the clipping feature for the non-window object case! Now, to answer your questions...

-I did notice the clipping slightly covering the scrollbar. It would be nice if that didn't happen, but it's something that we can live with.

-I did NOT notice the status bar debug, thanks for pointing that out.

-No, I'm not using the y-offset feature at this time.

And thanks for taking a look at the page, it's a large project, and it's exciting to be finally close to a release!

Offline

 

#15 November 4, 2010 9:58:42 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

I think I have the clipping working ok now. Actually it's pretty cool... except, I definitely do not like the way it creates a horizontal scrollbar on the window - as if the unclipped element is rendered.

I'm now explicitly setting the width of the header-table. I had dropped that previously because the column alignment is better without it. But without it there are problems when the window is sized too narrow. sigh

As for the flash that occurs because the header-table doesn't appear quick enough on a fast scroll - haven't solved that.

Today luv2hike posted a question on xTable. It had been a long time since I had looked at that code. It makes me consider rewriting xTHF to use a similar technique - even tho I really didn't like that technique, but it does make column alignment easier.

Offline

 

#16 November 4, 2010 10:30:25 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Think I found a work-around for the jump/flash. If the container is not window and the table has no caption then do not hide the header-table. So if the problem is that the header-table is not rendered quick enough, then just never hide it! smile

Offline

 

#17 November 4, 2010 10:39:36 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Ack. That doesn't work when multiple tables are in the same container.

Offline

 

#18 November 5, 2010 11:04:59 am

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

My app only has one table in the container, so I'm interested in seeing your solution even if it doesn't work with multiple tables.

Thanks again for all the time you've spent on this!

Offline

 

#19 November 8, 2010 11:12:50 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Hi theseeker, I think it's ready for you to give it a try whenever you want to. For the "header no-hide" feature, set yOffset to 0. Some of the demos make use of this. Thanks!

Offline

 

#20 November 8, 2010 4:56:38 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

I've implemented your latest code changes... no  more "jumping," and the scrollbar is no longer partially covered when the window is small or resized! Thank you so much!

The one new issue that I noticed is that the header columns no longer line up perfectly in Firefox or Chrome. In both browsers, each header column is shifted a pixel or two to the left of the rest of the table. I know Firefox has been problematic from the beginning, but this is the first time I've seen the columns not line up in Chrome. Oddly enough, everything lines up perfectly in IE 8! Honestly, I'll live with the slight misalignment to have the jumping and scrollbar issues fixed.

Offline

 

#21 November 9, 2010 7:17:57 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Hi theseeker, sorry about the trouble. I think I have it a little better now, at least in Chrome.

Offline

 

#22 November 10, 2010 9:28:27 am

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

No trouble at all. Everything lines up perfectly in Chrome again, thanks!

Firefox sure is pesky, isn't it? smile

Thanks again.

Offline

 

#23 November 10, 2010 10:06:25 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

You are very welcome. Thank you very much for your nice comments, code contributions and testing assistance.

The table model was already a mess, but border-collapse:collapse drove it off the cliff. Usually FF is not the "problem browser", but in this case it is.

Have a great day! smile

Offline

 

#24 November 22, 2010 9:21:13 am

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Scrollbars and small windows

After reading your note, I decided to go back to the "old" method of making the table borders and ditch border-collapse:collapse. Everything looks absolutely perfect now!

The only issue that I can think of that remains for us is the fixed header weirdness that happens when browser zooming is used. The easy workaround in Firefox and Internet Explorer is to simply increase the text size and avoid zoom altogether. Chrome 7 doesn't appear to have a text size change option, so zoom is the only choice, so we'll tell Chrome users to either not zoom or use IE or Firefox instead if they must have larger text.

Hope you have a great Thanksgiving!

Offline

 

#25 November 22, 2010 5:13:39 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Scrollbars and small windows

Hi theseeker, I'm very glad to hear that it's working well for you! I'll have to take a look at the zooming issue some other time - sounds like a tough nut to crack, LOL.

I hope you also have a great Thanksgiving! Thanks!

Offline

 
  • Index
  •  » X Library
  •  » [xTableHeaderFixed] Scrollbars and small windows

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load