Is it possible to set horizontal scroll to inner table?

[marianopeck]

Hi,

First of all, thanks for such a great product!

Sorry for off topic question, but I have the following scenario. I have a main div which is a kind of a workspace (which is not even in the top part of the screen). Inside that workspace, I have some divs and BELOW that I have a table. I am using floatThead and I set the scrollContainer: with the workspace id. This works correct in the sense that when I scroll down, the table header keeps fixed on the top part of the workspace area.

The problem is that my table can have lots of tables, making it much wither than the stuff above (mostly controls related to the table) which is still inside the workspace.

If I enable scrolling at the workspace level, then floatThead works correct in the sense I can scroll horizontally and header is aligned with body. However...what happens here is that for the user is very annoying because the upper part (controls) remain on the left. So...Ideally I would like to horizontally scroll in a table container so that I can only scroll the table and keep the above stuff visible.

When I try to set a overflow-x: auto to my table container, the body parts scroll horizontally very well, but of course, the header (floating) does not scroll and keeps always in the same place with the old (already moved) table headers.

I know it is a bit of a pain to explain without a jsfiddle but it is a bit complicated to isolated and get permissions from the client.

So..in summary, is there something I can do so that I can set a bigger scrollContainer: (for the Y scroll) and then allow me to horizontally scroll my table with the header?

Thanks in advance,

[mkoryak]

sorry,
Its really hard to understand your problem. a jsfiddle would help :)

have you tried changing useAbsolutePositioning option?

[marianopeck]

Hi, Sorry, I was afraid of that ;)
I tried to make a jsfiddle. I can reproduce it there but I think you should be able to horizontally scroll without needing to go to the scrollbar on the bottom. I can do that with trackpad gestures...
Maybe you can reproduce it too: http://jsfiddle.net/Gp3yV/13/
Scroll down until the table header is fixed (forget the ugly styles)..then, once the header is fixed, try to horizontally scroll...the table body will scroll, but the header will stay...

Were you able to reproduce it?

Thanks in advance,

[mkoryak]

that is an old fiddle that uses a very old version of floatThead, and the header doesnt float...

are you sure you pasted the right thing?

[marianopeck]

mmmm maybe I did not save the fiddle. Can you make it float with this one?
http://jsfiddle.net/Gp3yV/16/

[mkoryak]

ok, so i see some sort of buggy behavior going on here. This isnt a very clean jsfiddle so it might take me a bit of time to get to the bottom of whats happening here, so feel free to clean it up a bit.

[mkoryak]

hold on a second!
You pasted in your html after the plugin ran, which now includes html generated by the plugin. You need to give me your original html.

[marianopeck]

Ouch...what an idiot I am...sorry... here is the same version but with the original HTML

http://jsfiddle.net/Gp3yV/18/

I know the jsfiddle is not clear but it is hard to clean it :(

Thanks!

[mkoryak]

ok, now i see the problem.
your scrollContainer is not your scroll container. the container which creates the horizontal scrollbar is the parent div of the table: <div id="id936" style="overflow-x: auto; ">

the plugin expects $table.closest('.quuveWorkspaceTabContents') to provide both the vertical and the horizontal scrolling.

the solution is to change scrollContainer to return that div, and give that div a height

[marianopeck]

Hi, yes, I tried but, but it's not exactly what I want. I can change the scrollContainer to return the table container div rather than the workspace. However, that is not what I want because I want the table header to be on the top of the workspace, not in the middle or so. Try by doing return $('#id936'); to see what I mean (set the table container as scrollContainer).

So I guess in other words I want to scrollContainer to provide the vertical scrolling only (so that the table header is fixed on the top of that), yet I would like to define a horizontal scrolling for the table container.

There is no workaround for that?

Thanks in advance,

[mkoryak]

Not right now, you are the first person that wants 2 different containers to provide the scroll behavior.

I am not sure what you mean by "I want the table header to be on the top of the workspace, not in the middle or so"
Can you show me a fiddle that demonstrates this problem?

[marianopeck]

OK...it was easier to make some videos than a fiddle to demonstrate the issue. Please see this very short videos:

https://dl.dropboxusercontent.com/u/6980943/video1.mov
https://dl.dropboxusercontent.com/u/6980943/video2.mov
https://dl.dropboxusercontent.com/u/6980943/video3.mov

Thanks!

[mkoryak]

It looks like you need to be using window scrolling, have you tried that yet?

[marianopeck]

Hi,

Yes, I tried that as well an set the scrollingTop: accordly. However, it doesn't work because my main workspace div must have (for other reasons) a overflow-y: auto. And windows scrolling doesn't seem to work with that.

[mkoryak]

in that case, i think your best bet might be go to back to the original code like in the fiddle, and set the min-height on the table's parent div programmatically before floatThead init, and set that div as the container.

you will have to calculate the height of that div, but that shouldnt be too hard.

I looked at my code and supporting your usecase will not be trivial, having one scrolling container at the foundation of this plugin unfortunately.

[mkoryak]

the header going in the middle of your table is a bit weird. it probably has to do with how the table is positioned. Is it using top:0;left:0;bottom:0;right:0 type of positioning? If so, put that positioning on an outer container and the plugin should work just fine on the table

[mkoryak]

let me know if you need any more help on this

[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.