1

I am able to see the scrollbar but unable to scroll the content in the div.

The scroll bar is visible but unable to scroll the content I have attached screenshot of how the scroll bar is rendered.

screenshot.png enter image description here

Table screenshot enter image description here

<div style="height:auto;width:777px;overflow:hidden;margin-left:0px;" id="ios_mdata" class="contentHolder">
    <table class="table table-bordered table-hover table-condensed"  style="margin-left:23px;">
        <thead>
            <tr>
                <th>Version</th>
                <th>App Type</th>
                <th>File Size(MB)</th>
                <th>Release Date</th>
                <th>Minimum OS</th>
                <th>Avg. User Rating</th>
                <th>User Rating Count</th>
                <th>Last Updated</th>
                <th>View in Store</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>5.3</td>
              <td>universal</td>
              <td>12382700.0</td>
              <td>2010-11-05</td>
              <td>7.0</td>
              <td>2</td>
              <td>2</td>
              <td>2015-08-03</td>
              <td>link</td> 
            </tr>
        </tbody>
    </table>
</div>
<style type="text/css">
  .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
  .contentHolder .content { width: 1280px; height: 620px; }
  .table { width: 1200px; }
  .spacer { text-align:center }
  .table-bordered {
    border-collapse: collapse;
  }
</style>
<script type="text/javascript">
    $("#ios_mdata").perfectScrollbar()
</script>
Mano
  • 979
  • 1
  • 18
  • 36
  • Is it because the table is entirely visible and so no scrolling is required/possible? It's hard to tell from your screenshot but it looks like both the left and right sides of the table are visible already. – Max Williams Aug 04 '15 at 11:08
  • @MaxWilliams No its not visible entirely only half of the table is shown in that screenshot. – Mano Aug 04 '15 at 14:02
  • Ok, then can you replace it with a screenshot of the whole table please? – Max Williams Aug 04 '15 at 14:10
  • @MaxWilliams i have attached a screenshot of the whole table. – Mano Aug 05 '15 at 05:26

4 Answers4

1

I ran into a similar issue. Here is what I found worked:

<div class="scroller" style="overflow-y: auto; overflow-x:hidden; position: relative; height: 340px"> <table>...</table> </div>

Then call in the Javascript:

$('.scroller').perfectScrollbar();
SHzr
  • 31
  • 6
0

Its quite difficult to figure out your answer, but this seems to be a design issue. Developers have complained that using overflow property often causes the scroll bar to act strangely. Try to avoid using the overflow property.

coderVishal
  • 8,369
  • 3
  • 35
  • 56
0

it's because you have overflow:hidden; set on the table.

http://www.w3schools.com/cssref/pr_pos_overflow.asp

Remove this style rule and overflow will revert to the default of auto, and you'll get your working scroll bar back.

Max Williams
  • 32,435
  • 31
  • 130
  • 197
0
**Use two tables**
    1. Table for table header
    2. Table for table body
    
This is the best way of creating table with scrollable body having perfect scroll or any other type of custom scroll.

<div>
   <div>
      <p-table>
         <ng-template pTemplate="header">
            <tr>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>            
            </tr>
         </ng-template>
      </p-table>
   </div>
   <perfect-scrollbar>
      <div style="max-height: 300px;">
         <p-table [value]="tableData">
            <ng-template pTemplate="body" let-tableData>
               <tr>
                  <td>tableData.id</td>
                  <td>tableData.firstName</td>
                  <td>tableData.lastName</td>
               </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage" let-columns>
               <tr>
                  <td class="text-align-center" colspan="3">
                     <div>Loading data.. Please wait...</div>
                  </td>
               </tr>
            </ng-template>
         </p-table>
      </div>
   </perfect-scrollbar>
</div>
Manish Bansal
  • 1