Whenever somebody posts a message to the chatterbox containing a very long unbroken word, or a URL, the chatterbox is forced wider to accommodate it.

That was how things used to be, anyway.

Last century.

Do this:

  1. If you haven't already, go to your User settings and select the Everything2 Zen theme from the dropdown.

  2. If you haven't already, go to The Catwalk or Theme Nirvana and select any Zen stylesheet from the list.

  3. Go to style defacer and add the following statement at the bottom:

            #nodelet_170070 .nodelet_content { overflow: auto; }

The result

is that the catbox nodelet always stays the same width. Instead, when a long word is posted, a discreet scrollbar is added at the bottom of the nodelet, which you can use to scroll right and see the rest of the very long word-- if you care. Meanwhile, the rest of the text stays within the usual catbox confines, and the chatter is not disrupted.

That third step is actually optional too, because all of the most popular Zen stylesheets have this statement included as standard, and have done since day one.

Seriously, people, catbox stretching is no longer an issue for anybody but the Luddites and hasn't been for the best part of a year. If you see someone still moaning about this, give them a slap and send them here.

How does it work?

Since you ask: In the Zen theme, every (significant) HTML element on every page on E2 has a unique identifier. If you click "View Source" and hunt around for the part of the HTML where the chatterbox appears, you'll see that the <div> which contains the chatterbox has the property 'id="nodelet_170070"'. It also has a smaller <div> inside it which contains the text of the current conversation, which has the property 'class="nodelet_content"'. These properties are there so that these elements can be styled using CSS declarations like the one above. In fact, that's the whole point of the Zen theme and the whole point of CSS.

The declaration says: "look for the element with the property 'id="nodelet_170070"'. Then, look for any elements within that element having the property 'class="nodelet_content"'. For any of the elements, set it so that if there is too much text to accommodate, a scrollbar appears automatically." Other "overflow" settings can be used to make it so that the catbox stretches in the old, bad way, or so that no scrollbar appears.

If you'd like to learn more, put "Cascading Style Sheets" into any internet search box you can find, or check out Zen theme.

This node was written because in10se's E2 Explorer has "quickly remove a message from the chatterbox display because someone decided to add a URL, and it made the display too wide" listed as a feature. I was concerned at the implication that E2 cannot already handle this.