Question

I’m looking for a good way to do a vertical wrap. My goal is to fit a list of checkboxes into a div. I have the checkboxes sorted alphabetically, and I want the list to flow from the top of the div to the bottom and then begin again in a new column when they reach the bottom. Right now, I can do this by breaking the list into chunks of a predefined size on the server-side before feeding it into my html template. But things get messy when the list gets so long that you have to scroll. I’m hoping to force it to scroll horizontally only. This is not so easy, since I’m holding each chunk in a floating div, so white-space:nowrap doesn’t seem to cut it. Currently, I’m using javascript count the number of list chunks and extend the width of an intermediary container (inside the div that serves as the viewport but containing the divs that contain the data). I want something that looks roughly like this:

 __________________________ | []..... []..... [].....  | | []..... []..... [].....  | | []..... [].....          | | []..... [].....          | |__________________________| |<|_____________|___||___|>| 

So I guess I have two questions:

1. Is there a good way to vertically wrap a list?
2. Is there a good way to force horizontal scrolling when the data gets too large for the viewport?

Answer 1

I ended up using a little server-side preprocessing. This site, and this particular page, ended up needing a fair amount of preprocessing anyway, and I don’t expect the size of the data to get too huge.