StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Option 1:</strong></p> <p>You can set the height and margin of your elements :</p> <p>For instance, give a <code>margin-top</code> and <code>margin-bottom</code> to the ul :</p> <pre><code>ul { margin-top: 10px; margin-bottom: 10px; } </code></pre> <p>Give a height to your <code>li</code> elements</p> <pre><code>li { height: 30px; } </code></pre> <p>Then set your right panel's height is the sum of <code>margin-top</code> + <code>margin-bottom</code> + <code>num_li</code> * <code>li_height</code> = 10px + 10px + 4 * 30px = 140px</p> <p>Then you just have to tell the right panel content not to overflow with <code>overflow: scroll</code> for instance</p> <pre><code>.v-tabs-cont { height: 140px; overflow: scroll } </code></pre> <p><a href="http://jsfiddle.net/7Tse4/8/" rel="nofollow">demo here</a> (I put my css additions at the bottom of the css section for clarity)</p> <p><strong>Option 2:</strong></p> <p>If you cannot set the margin/height of your elements, or if you have a variable number of list elements, follow the same logic to compute the right panel height on page load (using jQuery)</p> <pre><code>var height = $('.vtabs li:first').height() * $('.vtabs li').length + parseInt($('.vtabs').css('marginTop').replace('px', '')) + parseInt($('.vtabs').css('marginBottom').replace('px', '')); $('.v-tabs-cont').css('height', height + 'px'); </code></pre> <p>You still need to add the <code>overflow: scroll</code> to prevent the content from overflowing</p> <pre><code>.v-tabs-cont { overflow: scroll; } </code></pre> <p><a href="http://jsfiddle.net/7Tse4/10/" rel="nofollow">demo here</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload