IE8 & Google Chrome Shows tiny y-Scrollbar even for small records
IE8 & Google Chrome Shows tiny y-Scrollbar even for small records
sen
Posts: 7Questions: 0Answers: 0
I am using jQuery data tables in most of my application screens in my project.
We use IE 8.0, Firefox & Google Chrome browsers to test the screens.
I disable the pagination & I use
$('#myGrid').dataTable( {
"bPaginate": false,
"bScrollCollapse": true,
"sScrollX": "100%",
"sScrollY": "300px",
"sScrollXInner": "101%"
)};
so that I require a horizontal scroll when the table has more columns to be shown in the view port & y scroll if there are more records than 300px.
The screens are working fine in Firefox.
But in IE 8.0 & Google Chrome, even when there are very less number of records (1 or 2), still I get a vertical scroll & the thing is that it shows only 1 record in display & text shows (Showing 1 of 2 records) and with a tiny y-scroll bar. The x-scrollbar hides the second record.Its difficult for people to see & use.
I would like to have the yScroll only when the records exceeds sScrollY height mentioned.
Can you help me in resolving this issue.
-Sen
We use IE 8.0, Firefox & Google Chrome browsers to test the screens.
I disable the pagination & I use
$('#myGrid').dataTable( {
"bPaginate": false,
"bScrollCollapse": true,
"sScrollX": "100%",
"sScrollY": "300px",
"sScrollXInner": "101%"
)};
so that I require a horizontal scroll when the table has more columns to be shown in the view port & y scroll if there are more records than 300px.
The screens are working fine in Firefox.
But in IE 8.0 & Google Chrome, even when there are very less number of records (1 or 2), still I get a vertical scroll & the thing is that it shows only 1 record in display & text shows (Showing 1 of 2 records) and with a tiny y-scroll bar. The x-scrollbar hides the second record.Its difficult for people to see & use.
I would like to have the yScroll only when the records exceeds sScrollY height mentioned.
Can you help me in resolving this issue.
-Sen
This discussion has been closed.
Replies
Sure - can you link me to a test case showing the issue please? Can you also confirm that you are using DataTables 1.9.1?
Thanks,
Allan
In the datatables initialization, I used fnVersionCheck( '1.8.0' ) & it returned "True"
------------------------------------------------------------------
$(document).ready(function() {
var myDataGrid = $('#myGrid').dataTable( {
"bPaginate": false,
"bScrollCollapse": true,
"sScrollX": "100%",
"sScrollY": "300px",
"sScrollXInner": "101%"
)};
alert(myDataGrid.fnVersionCheck( '1.8.0' ) ); // Returned True
} );
------------------------------------------------------------------
How do I link to a test case? screenshots - if so, how can i attach them.
-Sen
Just paste in the URL of a test page. If you've got no where to host a test file you could use http://live.datatables.net to construct an example showing the problem, or JSFiddle.
Thanks,
Allan
Through the web developer plugin in the IE 8.0 browser, I found that it is setting the height:83px and this brings scrollbar (xScroll & yScroll)
Rendered HTML portion:
How can I remove the auto generated height from the above auto generated div
You could remove: "bScrollCollapse": true, however, then you wouldn't get the table to fit the data.
Really I would need to be able to see the example. If you are rendering an HTML table, can that not be saved off to a static page so the error can be reproduced and fixed. Without a way to reproduce the error, I'm not going to be table to fix it :-)
Allan
I get y-scroll icons even if there are no records in IE 8 & in Google chrome, the X-scroll bar hides the display area.
please find below the example (table with no records):
- sen
--------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
myApp Application Home
<!-- dataTable css -->
<!-- //jqueryUI css -->
<!-- //jquery -->
!window.jQuery && document.write(unescape('%3Cscript src="/myApp.Web/commonWeb/js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))
<!-- //jqueryUI -->
<!-- dataTable -->
<!-- Global CSS Styles - Latest -->
$(document).ready(function(){
$(function() {
$('#myDataGrid').dataTable( {
// "sPaginationType": "full_numbers",
// "iDisplayLength": 10,
"bPaginate": false,
"bServerSide": false,
"bScrollCollapse": true,
"sScrollX": "100%",
"sScrollY": "300",
// "sScrollXInner": "101%",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 1 ] }
]
} );
});
});
<!-- Data Table Starts -->
Sl.No
Transaction
Levels
Date
Status
For no records available in the table, i get varied heights being generated under IE8, Google Chrome, Firefox
Please see the different heights generated for the "dataTables_scrollBody"
IE 8.0
-----------------
Also get a tiny y-scroll buttons in IE 8.0
Google Chrome 12
-----------------
Mozilla Firefox 11
-----------------
Can you either link me to a test case that shows the problem, or build an example showing the problem using http://live.datatables.net . That way I will be able to at least see the problem and stand a chance of debugging it! :-)
Allan
On chrome there is an unnecessary vertical scroll bar which moves a few pixels. On IE there are both tiny vertical and horizontal scroll bars.
Allan
In my code I get a tiny vertical scroll bar inside the table which in turn seems to add a horizontal scroll bar because of the extra width of the vertical scroll bar heh. Will see if I can create an example.