[FIXED][3.0rc2]HTMLEditor toolbar overflow renders incorrectly

[eschuy]

Ext version tested:
Ext 3.0 RC2

Browser versions tested against:
Google Chrome


IE8


FF3 (firebug 1.3.0.10 installed)
Safari 4

Operating System:

WinXP Pro

Description:
The overflow on the htmleditor form element seems to eat the missing buttons and renders weirdly.
Tested on all browsers. Please see following screenshot.


http://i40.tinypic.com/2n7h7yh.jpg

Test Case:



Just modify the third form in the dynamic form example from the docs and you'll be able to reproduce it.

[mjlecomte]

Thanks for the report.

Confirmed as of rev 4662 (3.0.0-RC3+).

Reducing the FormPanel width from 600 to 400 is sufficient.

[evant]

Fixed in SVN, thanks for the report.

[eschuy]

Great job.

Thanks guys :)

[stever]

Sorry, I forgot to give the css fixes when I was talking about overflow before. SVN conflicts sort of woke me up on that. One of the things I did was make the images specific to the small button size, since that is the size of the icons. That is:


.x-html-editor-tb .x-btn-small .x-edit-bold, .x-menu-item .x-edit-bold {
background-position:0 0;
}


Also there are copies and copies of background-image in there for some reason???

This is my structure/editor.css


.x-html-editor-wrap {
border:1px solid;
}

.x-html-editor-tb .x-btn-small .x-btn-text {
background:transparent no-repeat;
padding-left:0;
}

.x-html-editor-tb .x-btn-small .x-edit-bold, .x-menu-item .x-edit-bold {
background-position:0 0;
}

.x-html-editor-tb .x-btn-small .x-edit-italic, .x-menu-item .x-edit-italic {
background-position:-16px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-underline, .x-menu-item .x-edit-underline {
background-position:-32px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-forecolor, .x-menu-item .x-edit-forecolor {
background-position:-160px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-backcolor, .x-menu-item .x-edit-backcolor {
background-position:-176px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-justifyleft, .x-menu-item .x-edit-justifyleft, .x-html-editor-tb .x-menu-item-checked .x-menu-group-item .x-edit-justifyleft {
background-position:-112px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-justifycenter, .x-menu-item .x-edit-justifycenter, .x-html-editor-tb .x-menu-item-checked .x-menu-group-item .x-edit-justifycenter {
background-position:-128px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-justifyright, .x-menu-item .x-edit-justifyright, .x-html-editor-tb .x-menu-item-checked .x-menu-group-item .x-edit-justifyright {
background-position:-144px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-insertorderedlist, .x-menu-item .x-edit-insertorderedlist, .x-html-editor-tb .x-menu-item-checked .x-menu-group-item .x-edit-insertorderedlist {
background-position:-80px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-insertunorderedlist, .x-menu-item .x-edit-insertunorderedlist, .x-html-editor-tb .x-menu-item-checked .x-menu-group-item .x-edit-insertunorderedlist {
background-position:-96px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-increasefontsize, .x-menu-item .x-edit-increasefontsize {
background-position:-48px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-decreasefontsize, .x-menu-item .x-edit-decreasefontsize {
background-position:-64px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-sourceedit, .x-menu-item .x-edit-sourceedit {
background-position:-192px 0;
}

.x-html-editor-tb .x-btn-small .x-edit-createlink, .x-menu-item .x-edit-createlink {
background-position:-208px 0;
}

.x-html-editor-tip .x-tip-bd .x-tip-bd-inner {
padding:5px;
padding-bottom:1px;
}

.x-html-editor-tb .x-toolbar {
position:static !important;
}

and blue/editor.css:


.x-html-editor-wrap {
border-color:#a9bfd3;
background-color:#fff;
}
.x-html-editor-tb .x-btn-small .x-btn-text, .x-html-editor-tb .x-menu-item .x-menu-item-icon {
background-image: url(../images/default/editor/tb-sprite.gif) ;
}

[mjlecomte]

Sorry, I forgot to give the css fixes when I was talking about overflow before.
@stever, sorry couldn't find what you were referring to. :-?