Question

I’ve been working on creating a Spell check dialog for the tinyMCE editor using jQuery’s dialog control. My reason for doing this is because our users have touch screens and the default method of click-word/click-replacement is too cumbersome.

I’ve finally got the spellcheck dialog to the point of everything works.

However, the div where I display the text can go nuts in 2 different ways if provoked.

For example, here is the dialog as I want it to work. Seen “working” here in ie7. http://jsfiddle.net/PMX8r/2/

Viewed in ie8 (or any newer browser) it is a much different matter.

The other issue is if the user enters a ridiculously long word my buttons get pushed away! Seen here in ie7. http://jsfiddle.net/PMX8r/3/

What style properties should I be looking at get this div under control?

Edit:
Sweet, it looks like overflow: hidden solves the 2nd issue as well.

Answer 1

The buttons aren’t pushed aside for me, but the first issue, where text overflows the div, can be fixed by

.SpellCheckDiv {
  overflow: hidden;
}

Assuming there’s some other way to scroll, otherwise use overflow: scroll;