css - HTML Div Width with Overflow: Auto? -


i'm creating div following:

edit: here's example:

<html>   <body>     <table>       <tr>         <td>           <div style="position: relative; overflow: auto; max-height: 15em;">             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>             <label><input type="checkbox"/>hello! hello!</label><br/>           </div>         </td>       </tr>     </table>   </body> </html>

the text of every label unnecessarily wraps next line.

how fix this?

attempt 1

add div,

white-space: nowrap;

the problem vertical scrollbar appears impedes on content introducing small unnecessary horizontal scrollbar.

attempt 2

add div,

white-space: nowrap; padding-right: 1.5em;   // increase appropriate

the problem here you're guessing size of vertical scrollbar remove horizontal one.

attempt 3

add div,

white-space: nowrap; overflow-x: hidden;  overflow-y: scroll;

now, horizontal scrollbar removed, , size of vertical 1 not being guessed, but visible.

attempt 4

the problem seems boil down needing reserve space scrollbar, overflow-y: scroll; without being visible. first solution came mind add div alongside first has overflow-y: scroll; set , width: 100%;. problem regular div scrollbar included in width. after trial , error though, seems if use float isn't. using float can force width of container larger scrollbars width, , setting width: 100%; on original div, take space too. hide float setting it's height 0.

n.b. i'm not entirely sure why works myself, , i've tested on firefox5 seems work. hope it's helpful you. so,

add,

<div class="hack"></div>

below you're original div. then,

.content {     float: left;     width: 100%;     overflow-y: auto;     max-height: 15em; }  .hack {     float: left;     width: 100%;     overflow-y: scroll;        height: 0; }

an edit of jsfiddle including fix here.


Comments

Post a Comment

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

i trying find efficient way previous revision of file text comparison using sharpsvn. using (svnclient c = new svnclient()) { c.authentication.defaultcredentials = new networkcredential( configurationmanager.appsettings.get("svnserviceusername") , configurationmanager.appsettings.get("svnservicepassword") , configurationmanager.appsettings.get("svnservicedomain") ); c.authentication.sslservertrusthandlers += new eventhandler<svnsslservertrusteventargs>(authentication_sslservertrusthandlers); collection<svnfileversioneventargs> fileversioncollection = new collection<svnfileversioneventargs>(); svnrevisionrange range = new svnrevisionrange(0, this.hooks.revision); svnfileversionsargs args = new svnfileversionsargs(); args.retrieveproperties = true; args.range = range; foreach (svnchangeitem item in log.changedpaths) { string path = this.repositorypath + it...
Read more

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

url - Querystring manipulation of email Address in PHP -

i using third party application (email2http) send me emailid, body , message. unable retrieve email id due name appended on , enclosed < , >. here querystring getting. test.php?from=ajay+reddy &subject=cx&body=somebody when print variable in php returns name , not email id. $from = $_get['from']; echo $from; //output ajay reddy please suggest me how can emailid also. i dont want use post method due testing , debugging. it's working fine. forgot use htmlentities() in debugging.
Read more