How can i add horizontal scrollbar on top and bottom of md-table?

Question

I have implemented a horizontal scrollbar on the top and bottom of the table but I could see only the bottom scrollbar. But I would like this scrollbar to be also on top of the table.

I have used jquery code for scrolling and directive for the table.

Expected :

Currently, I See Only the bottom bar

demo

Demo you can see working code

angular.module('components', [])
.directive('master',function () { //declaration
    function link(scope, element, attrs) { 
        scope.$watch(function(){ 
            scope.duelScroll = { 
                width:element[0].offsetWidth+'px' 
            };
        });
    }
    return {
        restrict: 'AE', 
        link: link 
    };
})
angular.module("datatable", ['ngRoute', 'ngMaterial', 'md.data.table']).controller("datacontroller", ['$scope', function($scope) {
   $(function () {
            $("[name='upperScroll']").scroll(function () {
                $("[name='wireTable']").scrollLeft($("[name='upperScroll']").scrollLeft());
            });
            $("[name='wireTable']").scroll(function () {
                $("[name='upperScroll']").scrollLeft($("[name='wireTable']").scrollLeft());
            });
            $("[name='upperScroll']").css({ 'height': ($("[name='wireTable']").height() + 'px') });
        });
        $scope.DataSet = [1];
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
<div ng-app="datatable" ng-controller="datacontroller">


<form name="Information">
    <md-content layout-padding ng-repeat="Data in DataSet">
        <ng-form name="invoice{{$index}}">
            <md-card style="background-color:Gainsboro">

                <div ng-init="isShowAll =true" ng-show="isShowAll">


                    <md-card>
                        <div name="upperScroll" style="overflow-x:scroll; overflow-y: hidden; max-height:20px; width:100%">
                            <div name="innerScroll" ng-style="duelScroll" style="height:20px;"></div>
                        </div>
                        <div ng-style="getStyle($index)">
                            <md-table-container name="wireTable" infinite-scroll="loadMore($index)" infinite-scroll-distance="1" infinite-scroll-parent="true" ng-init="isShow=true" ng-show="isShow">
                                <table master md-table md-progress="aPromise" name="innerWireTable">
                                    <thead md-head md-order="sortOrder" style="background-color:#e0dcff; ">
                                        <tr md-row style="height:45px">
                                            <th md-column><span>Test1</span></th>
                                            <th md-column><span>Test2</span></th>
                                            <th md-column><span>Test3</span></th>
                                            <th md-column><span>Test4</span></th>
                                            <th md-column><span>Test5</span></th>
                                            <th md-column><span>Test6</span></th>
                                            <th md-column><span>Test7</span></th>
                                            <th md-column><span>Test8</span></th>
                                            <th md-column><span>Test9</span></th>
                                            <th md-column><span>Test10</span></th>
                                            <th md-column><span>Test11</span></th>
                                            <th md-column><span>Test12</span></th>
                                            <th md-column><span>Test13</span></th>
                                            <th md-column><span>Test14</span></th>
                                            <th md-column><span>Test15</span></th>
                                            <th md-column><span>Test16</span></th>
                                            <th md-column><span>Test17</span></th>
                                            <th md-column><span>Test18</span></th>
                                            <th md-column><span>Test19</span></th>
                                            <th md-column><span>Test20</span></th>
                                           
                                        </tr>

                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td md-cell>Test1</td>
                                            <td md-cell>Test2</td>
                                            <td md-cell>Test3</td>
                                            <td md-cell>Test4</td>
                                            <td md-cell>Test5</td>
                                            <td md-cell>Test6</td>
                                            <td md-cell>Test7</td>
                                            <td md-cell>Test8</td>
                                            <td md-cell>Test9</td>
                                            <td md-cell>Test10</td>
                                            <td md-cell>Test11</td>
                                            <td md-cell>Test12</td>
                                            <td md-cell>Test13</td>
                                            <td md-cell>Test14</td>
                                            <td md-cell>Test15</td>
                                            <td md-cell>Test16</td>
                                            <td md-cell>Test17</td>
                                            <td md-cell>Test18</td>
                                            <td md-cell>Test19</td>
                                            <td md-cell>Test20</td>
                                            
                                           

                                        </tr>
                                    </tbody>



                                </table>
                            </md-table-container>
                        </div>

                    </md-card>
                </div>
            </md-card>

        </ng-form>
    </md-content>

</form> 


</div>

someone help me with this

I have already checked some questions related to the scrolling bar but I want to fix this code so please someone help me here to fix this issue also, it should support scrolling if we have multiple table http://jsfiddle.net/e1w0vmns/1/

Does this answer your question? [horizontal scrollbar on top and bottom of table](https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table) — Rahul Kumar, May 12 '21 at 17:50
I have already checked that but I need experts help here to fix this code and I want to just understand mistake. — its me, May 12 '21 at 18:18
Please **stop** posting requests for help on every other question you found on SO. Ask your question, wait for answers; do not post your link on every question on SO, **thanks**. Not good --> https://stackoverflow.com/questions/3934271/ — HoldOffHunger, May 13 '21 at 11:36

score 1 · Answer 1 · answered May 20 '21 at 22:33

Made few changes to your code.

Added unique class based on ng-repeat index to div upperScroll

class="upperScroll{{$index+1}}" custom-index="{{$index+1}}"

Added similar class to wireTable

class="wireTable{{$index+1}}" custom-index="{{$index+1}}"

Updated the script to use those classes to make specific target to support multiple table scroll

$("[name='upperScroll']").scroll(function () {
     var upperIndex = $(this).attr('custom-index');
     $(".wireTable"+upperIndex).scrollLeft($(this).scrollLeft());
});
$("[name='wireTable']").scroll(function () {
     var wireIndex = $(this).attr('custom-index');
     $(".upperScroll"+wireIndex).scrollLeft($(this).scrollLeft());
});

Jsfiddle - http://jsfiddle.net/7t9pmkqa/

score 0 · Answer 2 · answered May 12 '21 at 18:49

0

I'm not very much familiar with angular but going through the demo, I found the issue is with the width of innerScroll. You just need to set that width equal to table width

$("[name='innerScroll']").width($("[name='innerWireTable']").width());

You can find the working demo here working demo

answered May 12 '21 at 18:49

Avnish Singh Awi

104
1
3

If I have multiple tables only 1st table scroll is working others or not working http://jsfiddle.net/e1w0vmns/1/ – its me May 12 '21 at 19:18
Actually to handle multiple tables you need to change your logic. The question you posted was only about a single table. You should have been mentioned these before – Avnish Singh Awi May 12 '21 at 19:33
Sorry for inconvenience. I have ng-repeat in top level .right now you see only one table because I have set only one element in array but our implementation should support multiple elaments(multiple table) right – its me May 12 '21 at 19:41

score 0 · Answer 3 · answered May 20 '21 at 10:50

0

Did you try CSS overflow property?

overflow: scroll; /* Scrollbar are always visible / overflow: auto; / Scrollbar is displayed as it's needed */

answered May 20 '21 at 10:50

sohaib abro

1
1

how can we make dual scroll bar in table (top and bottom) – its me May 20 '21 at 10:51

score 0 · Answer 4 · answered May 20 '21 at 11:56

How to use it:

To use this plugin, just include the main JavaScript file jquery.doubleScroll.js after jQuery library: <script src="//code.jquery.com/jquery.min.js"> <script src="jquery.doubleScroll.js">
Then call the function doubleScroll() on the scrollable container and done. $('.element').doubleScroll();
Recompute the top ScrollBar requirements when the window is resized. $('.element').doubleScroll({ resetOnWindowResize:true });
Set the time to wait for the last update event (useful when browser fires resize event constantly during resizing): $('.element').doubleScroll({timeToWaitForResize: 30});
Hide the top scrollbar if the bottom one is not present. $('.element').doubleScroll({onlyIfScroll:true});
Override the default CSS styles: $('.element').doubleScroll({ scrollCss: {'overflow-x':'auto','overflow-y':'hidden'}, contentCss: {'overflow-x':'auto','overflow-y':'hidden'}, });
Specify the element to use as the scroll reference. First child element is used if nothing is specified. view source $('.element').doubleScroll({ contentElement: undefined });

can you please check this http://jsfiddle.net/e1w0vmns/1/ and it has jquery lib in fiddle — its me, May 20 '21 at 12:08

How can i add horizontal scrollbar on top and bottom of md-table?

4 Answers4