[thelist] Javascript DOM Injection overflow

Jay Turley jayturley at gmail.com
Wed Apr 15 16:36:41 CDT 2009


No meaty SQL queries or PHP wizardry today. Instead it's a javascript

Here's the situation. I pull some content (tags) from the database in JSON
format, and then I format them and inject it into the DOM into a
pre-existing DIV by using createDocumentFragment() and appendChild().

The content is formatted as a series of anchors. Post-DOM injection, Firebug
reveals the following structure:

<div id="tag-cloud"> <a class="tagSearchTrigger" href="javascript:void(0)"
rel="1" style="font-size: 24pt;">sketchy</a>
<a class="tagSearchTrigger" href="javascript:void(0)" rel="2" style="font-size:
<a class="tagSearchTrigger" href="javascript:void(0)" rel="5" style="font-size:

The above sits in a sidebar with a width of 300px.

It has the following CSS:

#sidebar div#tag-cloud {
    margin: 2px 10px;
    min-height: 40px;
    text-align: center;
    width: 280px;

However, the PROBLEM is that the series of anchors consistently overflows
the right side of its container div (tag-cloud) thus adding a horizontal
scrollbar at the bottom of the browser and generally making things look

Using overflow:auto or overflow:scroll simply adds scrollbars to the
container div. When what I obviously want is for the content to break.

Any ideas?

The reason I give so much detail is that this would be VERY difficult to put
out on a public site. :/



More information about the thelist mailing list