IE8 & Google Chrome Shows tiny y-Scrollbar even for small records

IE8 & Google Chrome Shows tiny y-Scrollbar even for small records

sensen Posts: 7Questions: 0Answers: 0
edited April 2012 in DataTables 1.8
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

Replies

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    > Can you help me in resolving this issue.

    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
  • sensen Posts: 7Questions: 0Answers: 0
    Hi 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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    > How do I link to a test case?

    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
  • sensen Posts: 7Questions: 0Answers: 0
    It is a java Struts page & the table data comes dynamically
  • sensen Posts: 7Questions: 0Answers: 0
    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    > 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
  • sensen Posts: 7Questions: 0Answers: 0
    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
  • sensen Posts: 7Questions: 0Answers: 0
    Allan,

    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
    -----------------
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Here is an example that I've just made based on your code: http://live.datatables.net/oqosal/edit#javascript,html - it appears to work as I would expect.

    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
  • ianwilk52ianwilk52 Posts: 2Questions: 0Answers: 0
    This example shows the problem if I am understanding the OP correctly: http://datatables.net/blog/Introducing_Scroller_-_Virtual_Scrolling_for_DataTables.
    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.
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    There is an iframe around that table - is that what is showing the scrollbars (I don't actually have access to a PC today unfortunately, so I can't check on that)? Or are the extra scrollbars inside the table itself?

    Allan
  • ianwilk52ianwilk52 Posts: 2Questions: 0Answers: 0
    Yeah actually it does look like it's the iframe as the search box moves when scrolling.
    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.
This discussion has been closed.