HORISONT SCROLL VERY URGENT

Trollchik

Hi guys, i have a problem and i need to find a dicision very fast.

I use DataTable and i have a lot headers!!! so my page look like very BAD and unproportional! I tried to use FixedHeader but it works unstable!!!

i need to make just one and simple thing: add horizontal scroll to table! I tried to put my table into div with style:"overflow:scroll" but my scroll appears after paginations, seacher and other tools. And it looks like very stupid! I need that my horizontal scroll situate immediatly after table content!!!

PLEASE help me, because i'm not a JS expert!!!!!!!!!!!!!!!

Thank a lot!

Trollchik

Please help me to add scroll immediatly after table, before div with pagination!!!!!!!!!!! HELP HELP HELP!!!

because now the div with pagination and search field has one length and table with headers much more!!!!!!!!!!

Trollchik

PLEASE GUYS HELP ME!!

Trollchik

Thank you very mush for you help!!! very good forum!!!! thank a lot ==))))))))))))))))))))))))))))))))))))))

themitchy

Try using the following in your options:

sDom: lfr<"class-with-overflow"t>ip

And make sure that class-with-overflow is a css class that has 'overflow: auto' and an appropriate width. This will make sure that only the table is in a div with the overflow property and the other elements are before or after it. Fixed headers isn't going to do anything to help you with horizontal scrolling.

Also try:
- posting your example code
- not yelling at people
- spell checking what you type
- less sarcasm ;-)

Trollchik

Thanks for your answer! and sorry for sarcasm!

Really you can see my problem here http://i42.tinypic.com/b4hh83.jpg

this is not my table but i have the same problem. If you look at right corner of this picture you can see that size of table bigger than header with tools!

So i hope that your previous advise help me!

Also i have some problems in FF. And i have the screenshot but i cannot attach it to this forum =(((( In IE all working fine!

allan

I suspect that there are a number of interaction issues with column widths which are contributing to the overall problem of the columns not quite lining up correctly with FixedHeader. For example the table container (the blue header) is obviously much shorter than the table as a whole - which for a start is going to throw things out, since all sizes are based on that, and it's wrong :-). Does it have a fixed size of 800px on it or something... I'd suggest poking around with Firebug.

You might also be interested in this post: http://datatables.net/forums/comments.php?DiscussionID=1867#Item_5 . I'm working on releasing a beta which will include 'true' scrolling (both x and y) which might help you.

Finally, if you need urgent support, there is the 'Support' button at the top of every page on this site.

Regards,
Allan

Trollchik

Hei, but in this post are tolking about jGrid, but DataTables i like more =)))

I was able to put a screenshot on a server http://www.dynosource.net/images/bag.png with my second bug. I can meet it just in FF after first scrolling pf page the header jump to place where it have to be. I suppose that dataTables.js create to headers instead of one, but why ?!=)))

Thanks again!

allan

FixedHeader overlays a copy of the original header on top of that original - hence why there are two. However, it was designed to work okay at the top of the page, not scrolling in the middle due to overflow:scroll or anything like that. For true scrolling you'll need to wait for the 1.7 beta which I am working on.

Allan

Trollchik

why my header works fine in IE and with a problem in FF (i mean problem with 2 headers) ???I think that this is problem in CSS. How do you think? because if in one browser it works, and in another - not!

allan

Can you give us a link to a page showing the problem please.

Allan

Trollchik

Hi,

I have a link now https://www.meritservus.com/test/test.html

Try to open it in FF! I think it some problem in CSS, because as i said before in IE it works fine!

what do you think about it?

Trollchik

I tried your advise with: sDom: lfr<"class-with-overflow"t>ip

it really added me a scroller but it anyway is wrong. because it scroll just content without headers!

When are you planning to issue 1.7 version ?

and can you said about double headers in FF? =)

iuliandum

Use it 1.7 version of Datatable
http://datatables.net/beta/1.7/examples/basic_init/scroll_xy.html

Trollchik

ok, now the scrollers are working as need but the size of headers don't compare with size of cells in rows (in a body)!

I will try to post a link later.

Trollchik

i put a new example by the same link https://www.meritservus.com/test/test.html

i added x-scroll and it works fine but now the size of cell in header doesn't compared with size of cell in a row! =((

allan

Try setting a width on your table. I don't actually understand why you need xscrolling on it at the moment - it all fits inside the table without any scrolling. Also, remove FixedHeader - you don't need that when using scrolling - that will simply things a bit, to narrow down what is going on.

Allan

Trollchik

All that i dispayed you before are not my real application, it just example with the same problems that i have in my app. I can't show my app because the data which it holds have confidential character!

so i need to use Fixedheader because i want to have scroll just by X!!!

really what i can't understand it why it works on your site without any problem?!!!

May be DataTables is uncompartible with one of jquery script ? or css?

allan

I rather suspect that FixedHeader and DataTables 1.7 scrolling won't work together... I've not tested it, but from how each of them works, I think work would be required in order to get them working together. I had rather assumed that if using scrolling X, you would also use scrolling Y rather than FixedHeader. Some experimentation might be required.

Allan

Trollchik

ok, let assume that have a simple monitor (not widescreen =) ) and you have a table with average 25-50 rows. As in my office a lot of people have a big screen resolution. i have to display near about 5-6 rows in a table with y-scroll! because if rows will be more the scroll of overall page will be enabled! So if table has 25-50 rows it isn't convenient to display 6 rows and scroll another 44 =)))) And you have take into account that i display a financial info so my table has a lot of headers! Due to this fact it's veru convenient to have FixedHeader (header wich can move by Y) and X-scroll (to move content by X)!!!

Trollchik

I get new and new problems! Even if i use just DataTables (without FixedHeader) + scroll, i can scroll just table content but header doesn't move!

Also i have a big empty row, between header and table content (when x-scroll is enabled)=))))

why it good works on your site? but doesn't work on my =(((

i include the next js:



- formating numbers

- for charts

- for charts





and the next CSS:







may be this is a problem? may be DataTables.js is uncompartible with one of them???

iuliandum

Hi Trollchik,

Same problem is on the site. See below example:

http://i.imgur.com/52o4a.jpg

Trollchik

yeeeeee, really exactly the same!

how do you think you can fix it ?

allan

@iuliandum: Is that on this site? Can you post a link please? Doing x and y scrolling with my example themed table seems to work for me in Safari, Firefox and IE using the following initialisation:

[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollY": 200,
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );
[/code]
and the table set to width: 110%;

There is a decent possibility of a bug in this area, given that it's brand new functionality - so it would be great to get this nailed down.

Allan

Trollchik

Hi,

when i put a new release of my appl i will try to give you an access, but i think it willn't be soon! All that i can do now it just make experiment by link which i gave you before and send you a screenhots!

iuliandum

Hi Alaan

I try your example from
http://datatables.net/beta/1.7/examples/basic_init/scroll_y_theme.html
and I obtained this
http://i.imgur.com/TkKgt.jpg

If I use show/hide column with scrollY properties, and I hide column 1 I obtained this:
http://i.imgur.com/xOHwZ.jpg

I sugest you to make table fixed for vertical scroll as . See in below example
http://i.imgur.com/2yRC3.jpg


OK.
Thanks for all!

allan

Hi guys,

Yup - definitely an issue with the beta and column alignment... :-( Not proving to be too easy to fix unfortunately, but hopefully have a new beta to address it soon.

@Trollchik: Due to the way FixedHeader works, it will not be supported with table scrolling at this time. It might be possible long term, but it would probably prove very difficult to do, particularly when considering x-scrolling, and then y page scrolling.

Regards,
Allan

Trollchik

Hi, Allan!

I understand that force to work Scroll + FixedHeader is not easy!

May be to fix the problem with double headers (i mentioned about it before) will be easy and faster??? and i will use Fixed HEader without scrolling untill new release will be issued!

Trollchik

Hi Alan again!

I tried again to use x-scroll and i want to inform you that x-scroll doesn't work if you use jQuery UI Theme!!! Y-scroll + jQuery UI Theme - works perfect! but if you use x0scroll+jQuery UI Theme it scroll just table's content without headers!!!

Thanks!

iuliandum

Hello, Trollchik

I want you to say to me 'True scrolling' works perfectly. But be careful in defining '' to add 'style = "width: 100%"'. This detail is very important in the functioning of 'True scrolling'.

Trollchik

@iuliandum: Hi, Thanks for response!

i don't know but it doesn't work for me! I have the next options:

[code]
oTable = $('#table').dataTable({

"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"sScrollX": "100%",
"sScrollY": "500",
"bJQueryUI": true

});
[/code]

and table:

[code]

[/code]

what is wrong?