Problem with using DataTables inside of ui.layout

pwd

I am trying to use DataTables inside of a "panel" created using jquire.ui.layout. It looks just
the way I want in every browser except for I.E. (of course).

The issue is that the table does not scroll within the div, only the other items in the div will scroll.

I have two DataTables in the same div (and a header between them) and only the header scrolls.

I have created a stand alone example (does not user server data)

I have taken a first look at both dataTables.js and layout.js but my javascript is new/weak and they
are BIG files. There does not appear to be any callbacks for the scrolling as it is done as a simple
div that is bigger than the space that is alloted for it.

thanks.

allan

Hi pwd,

There isn't any hooks between DataTables and jquery.ui.layout - I wasn't really expecting that the layout module would require any hooks. I'm not sure I fully understand what the issue is - you have a layout panel, with content in it (namely a DataTable) and that should 'float' at the top of the panel or something like that? If that is the case, it might be a question for the jQuery UI team (as it depends how the floating is done I would think) :-)

Regards,
Allan

pwd

OK let me try again.

What I have is a div that is bigger than the page but is only a part of the data. Within that div everything should scroll with the div but the DataTables (2) that are a part of the contents (but only a part) do not scroll. So what happens is that when I move the scroll bar ONLY the non DataTables elements move (the DTs stay in the same place w.r.t. the browser window as a whole. This is a I.E. issue only, firefox works fine.

I have been working on other parts of the system and have not had a chance to complete reducing the problem to a small test case that I can post but should get that done sometime next week.

allan

Hi pwd,

Yes please, it would be fantastic if you could post a test case. I'm guessing that it's a CSS positioning issue, but without a working example of the problem, I'm not sure I'll be much use in debugging it :-). Certainly it's not an issue I've come across before.

Regards,
Allan

wjaram

Has this issue been resolved. I'm experience something similar with jquery ui.. I have a modal div in the center of the screen and I placed a datatable on it. The modal div has scrolling enabled for the overflow and yet when I scroll the datatable remains in place, as if it's position was absolute... All the other content in the div will scroll without an issue. This only happens in IE both 7 and 8.