ASP.NET AJAX Control Toolkit HTMLEditorExtender issue when in modal popup in IE 7

Over again, supporting IE7 is a nightmare. Today I have been assigned to a defect says “When user enters long text and words in text editor in modal popup using IE7, the whole page/window horizontal scroll bar appeared and get wider as the user typing”.

I used AJAX Control Toolkit HTMLEditorExtender to provide simple formatting options when user enters text information. It is working as expected in IE8 & IE9, but in IE7 when HTMLEditorExtender used with Multiline TextBox in modal popup, it behaves in a weird way as described above.

I fixed this issue by using the below style to override the HTMLEditorExtender default style.

.ajax__html_editor_extender_texteditor
{
 word-wrap: break-word !important;
 height: 60px !important;
}
.ajax__html_editor_extender_container
{
 overflow: auto !important;
 height: 100px !important;
}

Note: !important and Height are not a must to fix this issue, but I used !important to enforce the style if other styles are there and Height to hide the scroll vertical bar until the text gets bigger than the input box.

Advertisement