Wednesday, 14 April 2021

How to have a scroll bar at top and bottom of angular md bootstrap table?

I have an angular MD bootstrap table where I want to have a horizontal scrollbar at the top and bottom of the table.

Following is the code,

<div layout="column" layout-align="center stretch" flex>
                <div layout="row" style="margin: 20px;">
                    <div flex></div>
                </div>
                <md-table-container flex>
                    <table md-progress="vm.searchTablePromise" md-table single>
                        <thead md-sticky
                               style="background-color:#00a9da;"
                               md-head md-order="vm.query.order">
                            <tr md-row>
                                <th style="color: white;" md-column md-order-by="name">
                                     Name
                                </th>
                                <th style="color: white;" md-column md-order-by="id">
                                     ID
                                </th>
                                <th style="color: white;" md-column md-order-by="ein">
                                    EIN
                                </th>
                                <th style="color: white;" md-column md-order-by="phNumber">
                                    Ph. Number
                                </th>
                                
                            </tr>
                        </thead>
                        <tbody md-body>
                            <tr md-row ng-repeat="item in vm.data">
                                <td md-cell>
                                    <div style="min-width: 200px;"></div>
                                </td>
                                <td md-cell>
                                    
                                </td>
                                <td md-cell>
                                    <div style="min-width: 80px;"></div>
                                </td>
                                <td md-cell>
                                    
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </md-table-container>
            </div>

Now, I have a horizontal scroll at the bottom, I also want to have it at the top.

This link provides a solution here but I don't want to have a JS related code for scrolling.

Any help is much appreciated.



from How to have a scroll bar at top and bottom of angular md bootstrap table?

No comments:

Post a Comment