[thelist] Forcing horizontal scroll instead of wrap.

[Barney Carroll]

Hi Ed,

I've come at this problem myself several times. It always strikes me as
absurd that there isn't a dirt simple CSS-based solution within easy reach
for such a simple layout conception — I always try to come up with some
clever method involving white-space and inline display but it never works.

You have two options: one of them involves having the sequence of records
appear in table cells on a single-rowed table — a table row won't break to
fit the line (although it will shrink as much as possible unless you specify
widths for the cells themselves).

If you're squeamish about using tables for things other than the
presentation of data for bona-fide two-dimensional cross-referencing, you
will have to float the containers for each record entry, and give their
parent a fixed width to contain them all and override the default
shrink-to-fit behaviour. If your app is static, you might be able to do this
on the back end, but flexibility requires a Javascript function.

If you have markup like this:

<ul id="records-list">
<li class="record-wrapper">
 …
</li>
 <li class="record-wrapper">
 …
</li>
</ul>

…then you could use a function like this one to sort it all out:

function stretchToFit(target){
var width = 0, nodes = target.childNodes; for(var i = 0; i < nodes.length; i
++){ if(typeof nodes[i].tagName !== 'undefined'){ width +=
nodes[i].offsetWidth +
parseFloat(getComputedStyle(nodes[i],null).marginLeft) +
parseFloat(getComputedStyle(nodes[i],null).marginRight); } }
target.style.width = width + 'px'; } window.onload = function(){
stretchToFit(document.getElementById('records-list')); }

I've put in the initial function call on window load here, although
obviously you'd have to run this each time you added or removed record
entries (dunno how your app handles this)…

Regards,
Barney Carroll

barney.carroll at gmail.com
07594 506 381


On 17 August 2010 23:18, Hugh Miller <hmiller at cfpress.co.uk> wrote:

> Just realised I was just extending the width of the page for you with a
> scroll on the window itself.
>
> Unfortunately overflow isn't quite up to what you're after either, because
> the additional content will wrap below the div, so you'll end up with
> vertical scroll with your divs underneat.
>
> What about a JS solution like jCarousel? It's really easy to install,
> although custom styling can be a bit footery depending on what you're
> looking to do.
>
> See examle:
>
> http://www.hughmiller.eu/overflow.php
>
> ----- Original Message -----
> From: "Frank Marion" <lists at frankmarion.com>
> Sent: Tue, 17/8/2010 20:32
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] Forcing horizontal scroll instead of wrap.
>
> On 2010-08-17, at 12:11 AM, Edward McCarroll wrote:
> > Can somebody clue me in to a CSS (or whatever) trick that forces a div
> > scroll instead of wrapping?
>
> The overflow property is your friend.
> http://css-tricks.com/the-css-overflow-property/
>
> --
> Frank Marion
> lists [_at_] frankmarion.com
>
>
>
>
>
>
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>
> --
> This message has been scanned for viruses and
> dangerous content by MailScanner, and is
> believed to be clean.
>
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>