InlineEditBox and dijit.Editor have toolbar display glitch in Firefox

[Jonathan Bowers]

If you use an InlineEditBox? with dijit.Editor as the editor in Firefox (tested in FF3 on Windows and Linux) the toolbar appears offset and displays lower than it should. It is also accompanied by some kind of grey vertical bar/artifact.

This can be reproduced under the dijit/tests/test_InlineEditBox.html and scrolling down to the Editor section.

This problem is purely cosmetic when autosave is disabled, however, if autosave is true and editorParams="{height:}" the toolbar will overlap the first line of text hiding it.

Note: This displays correctly in IE6

[Jonathan Bowers]

Upon inspection in firebug it appears as though the .RichTextEditable? class's border-style property is to blame.

Doing this in a subsequent CSS file is a decent workaround for the issue:

body .RichTextEditable? { border: none; }

[bill]

You are right, removing that border solves the problem... although I don't think it's the fault of the bordeer so much as the fact that, when used in conjunction with InlineEditBox, the Editor's domNode is a <span> rather than a <div>.

InlineEditBox's template (technically, InlineEditor?'s template) has a:

<span dojoAttachPoint="editorPlaceholder"></span>

which is then used to instantiate the editor:

var ew = this.editWidget = new cls(this.editorParams, this.editorPlaceholder);

And then Editor reuses that <span> node, for better or worse.

Anyway, I can work around this problem by making the <span> node display:block.

[bill]

(In [16639]) Fix display glitch on Editor inside of InlineEditBox?. Problem was that we were specifying a border on (an inline non display:block) <span>.

Fixes #8404 !strict.