Dual Horizontal Scrollbars

Dual Horizontal Scrollbars

AverageWorkerAverageWorker Posts: 5Questions: 0Answers: 0
edited July 2014 in Free community support

So I have to add a second scroll bar at the top of the data table (in addition to the horizontal one that appears at the bottom)
So far I've been able to add it, sync it up with the the other scrollbar, and align it with the table.

The trouble I'm currently having is that I don't know how to dynamically change the scrollbar's size (width more specifically) to match that of the datatable's scroll bar. Does anyone know how to match the sizes or at least how to have a scrollbar change it's size in accordance with a datatable?

Here is the code I have so far

<style>
wrapper1{width:507px; overflow-x: scroll; overflow-y:hidden; 
       height: 20px; float: right}
div1 {width:1000px; height: 20px;}
      </style>
    <script type="text/javascript"> $(function () {

    $("#wrapper1").scroll(function(){
        $(".dataTables_scrollBody")
            .scrollLeft($("#wrapper1").scrollLeft());
    });
    $(".dataTables_scrollBody").scroll(function () {
        $("#wrapper1")
            .scrollLeft($(".dataTables_scrollBody").scrollLeft());
    });
});             
        </script>
    
    <script type="text/javascript" charset="utf-8">
        
        $(document).ready(function () {
            var oTable = $('#tblFuels').dataTable({
                "bSort" : false,
                "bFilter": false,
                "bInfo": false,
                "sScrollY": "100%",
                "sScrollX": "500px",
                //"sScrollXInner": "70%",
                "bScrollCollapse": false,
                "bPaginate": false,
            });

            var o = new FixedColumns(oTable);
        });
    </script>
  }
}
    <div id="wrapper1">
        <div id="div1">
        </div>
    </div>
    <div clear: both></div>

and then I have the code for the actual data table below it

Replies

  • AverageWorkerAverageWorker Posts: 5Questions: 0Answers: 0

    I was able to figure it out. I made it so that the width of #div1 was the same width as #tblFuels and the scroll bars became the same width

This discussion has been closed.