jquery - Getting a fixed-width scrollable area -
i need vertically scrollable div of specific width. however, setting width to, say, 200px give me (for example) 190px of available space, , 10px of scrollbar, e.g.
#area { display: inline-block; width: 200px; overflow: auto; } ... <div id="area">(data using max. 200px of width)</div> because it's lacking width of scrollbar actual space, end minimal, useless (and ugly) horizontal scrollbar.
is there way either scrollbar size (besides getting difference next element, feels hackish) or "width-without-scrollbar: 200px"?
i'm using jquery, (more) dynamic solution using jquery acceptable (but i'd rather not use jquery scrollbar implementations, if possible want stick native scrollbars).
also, i'd rather not depend on css3 features.
to answer own question (but still looking alternatives), calculating difference using 100% width "detector" , resizing trick me. said, using javascript fix not problem in case not how want style own website :)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> #outer { display: inline-block; width: 200px; height: 100px; overflow: auto; } .detector { width: 100%; height: 0px; } .entry { display: inline-block; width: 200px; } </style> <script type="text/javascript"> $(document).ready(function() { var outer = $("#outer"); var detector = $("#outer .detector"); var scrollsize = 200 - detector.width(); outer.width(200 + scrollsize); }); </script> </head> <body> <div id="outer"> <div class="detector"> </div> <div class="entry"> i'm short entry </div> <div class="entry"> i'm entry div i'm very, very, very, very, very, very, very, very, very, long </div> <div class="entry"> i'm entry div i'm very, very, very, very, very, very, very, very, very, long i'm entry div i'm very, very, very, very, very, very, very, very, very, long </div> </div> </body> </html> this calculate difference between available space (which 200) , used space "detector" (which is, example, 185px). means scrollbar size 15px. making #outer 15px wider give full 200px-wide area (and remove horizontal scrollbar)
Comments
Post a Comment