javascript - hide vertical scroll in scrollable table -

-

i have implemented scrollable table pinned column , vertical , horizontal scrolling enabled. want hide vertical scroll appears besides pinned column. here plunker link. html looks this:

<div class="col-md-12">       <div class="col-md-3" style="padding:0;">         <table class="table" style="margin-bottom:0;">           <thead>             <tr>               <th>fixed</th>             </tr>           </thead>         </table>         <div style="height:100px; overflow-y:auto" id="fixed" on-scroll="">           <table class="table" style="margin-bottom:0">             <tbody>               <tr data-ng-repeat="data in [1,2,3,4]">                 <td>data data data data data data data data</td>               </tr>             </tbody>           </table>         </div>       </div>       <div class="col-md-9" style="padding:0;overflow:hidden">         <div id="topright" style="padding:0;overflow-x:hidden" on-scroll="">           <table class="table" style="margin-bottom:0">             <thead>               <tr>                 <th style="min-width:200px">column 1</th>                 <th style="min-width:200px">column 2</th>                 <th style="min-width:200px">column 3</th>                 <th style="min-width:200px">column 4</th>                 <th style="min-width:200px">column 5</th>               </tr>             </thead>           </table>         </div>         <div style="height:100px; overflow:auto" id="bottomright" on-scroll="">           <table class="table" style="margin-bottom:0">             <tbody>               <tr data-ng-repeat="data in [1,2,3,4]">                 <td style="min-width:200px">data data data data data data data data</td>                 <td style="min-width:200px">data data data data data data data data</td>                 <td style="min-width:200px">data data data data data data data data</td>                 <td style="min-width:200px">data data data data data data data data</td>                 <td style="min-width:200px">data data data data data data data data</td>               </tr>             </tbody>           </table>         </div>       </div>     </div>

thank you

there no real cross-browser solution doing this, best answer can find here:

hiding scrollbar on html page

answer link

for completeness' sake, works webkit:

#element::-webkit-scrollbar {      display: none;  }

if want scrollbars hidden, use

::-webkit-scrollbar {      display: none;  }

i'm not sure restoring - did work, there might right way it:

::-webkit-scrollbar {      display: block;  }

you can of course use width: 0, can restored width: auto, i'm not fan of abusing width visibility tweaks.

to see if current browser supports this, try snippet:

.content {    /* these rules create artificially confined space,        scrollbar can hide. not part of hiding itself. */      border: 1px dashed gray;    padding: .5em;        white-space: pre-wrap;    height: 5em;    overflow-y: scroll;  }    .content::-webkit-scrollbar {     /* magic bit */    display: none;  }
<div class='content'>  lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris eu  urna et leo aliquet malesuada ut ac dolor. fusce non arcu vel ligula  fermentum sodales quis sapien. sed imperdiet justo sit amet venenatis  egestas. integer vitae tempor enim. in dapibus nisl sit amet purus congue  tincidunt. morbi tincidunt ut eros in rutrum. sed quam erat, faucibus  vel tempor et, elementum @ tortor. praesent ac libero @ arcu eleifend  mollis ut eget sapien. duis placerat suscipit eros, eu tempor tellus  facilisis a. vivamus vulputate enim felis, euismod diam elementum  non. duis efficitur ac elit non placerat. integer porta viverra nunc,  sed semper ipsum. nam laoreet libero lacus.    sed sit amet tincidunt felis. sed imperdiet, nunc ut porta elementum,  eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. quisque  nec magna erat. phasellus vehicula porttitor nulla et dictum. sed  tincidunt scelerisque finibus. maecenas consequat massa aliquam pretium  volutpat. duis elementum magna vel velit elementum, ut scelerisque  odio faucibus.  </div>

(note not correct answer question because hides horizontal bars well, that's looking when google pointed me here, figured i'd post anyway.)


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

-
i've been working on making 2d map editor past 2 weeks or so, , i've run strange problem. trying optimize code, example, making functions should've been functions begin with, did made cpu usage go through roof. i've tried commenting out different sections of code thought culprits (scrolling, rendering, other calculations) no avail. think issue might trying call things within different functions, sake of making modular possible, i'd functionality. the other major change i've made since file i'm comparing i've ported variables external cpp file, since having variables global makes lot easier use within different functions. simple issue, can't life of me understand why happens. with original code, around 2-3% cpu usage. new code, around 20-35%, but, if move mouse around, it'll drop around 6-8%. tl;dr: after trying optimize code using functions, i've somehow killed performance, , found strange quirk moving mouse reduces cpu usage.. /...
Read more

ios - Possible to get UIButton sizeThatFits to work? -

-
i have been using method of resizing uibuttons depreciated, , not robust. , other reasons, want sizethatfits work uibuttons. i've read online, i'm not sure if should work (seems working some, not others, difference maybe between style, i'm using custom). here simple test code recreate issue (i put in viewdidload test, shouldn't matter, , real code part of large project): uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom]; [btn settitle:@"this test long title need word wrap more single line when displayed on tiny ipod in portrait view." forstate:uicontrolstatenormal]; btn.titlelabel.linebreakmode = uilinebreakmodewordwrap; // depreciated - nothing replace it? cgrect r = btn.frame; r.origin.x = 0; r.origin.y = 0; r.size.width = 320; r.size.height = [btn.titlelabel.text sizewithfont:btn.titlelabel.font constrainedtosize:cgsizemake(r.size.width,100000) linebreakmode:btn.titlelabel.linebreakmode].height; // returns approx 86 , changes correctly ...
Read more