Hello,
Issue #1 Display None
Note - This only occurs in Internet Explorer 8 to my knowledge. This does NOT occur in Internet Explorer 9 utilizing compatibility mode to view the page in Internet Explorer 8.
I believe I've recently found an issue with using the HTMLEditorExtender control. It would seem as the display none css attribute, displayed below, causes a javascript error to occur.
display:none;
When this is used on a container around the control and a partial postback occurs, this javascript error is thrown: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
I know that this is a problem if this control is used in a jQueryUI modal, but I also believe that this is an issue with a CollapsiblePanelExtender when it is collapsed.
Issue #2 Width
The second issue seems to come when the HTMLEditorExtender is placed in a jQueryUI modal, and I've seen another help issue found here showing that it also occurs on the ModalPopupExtender:
http://ajaxcontroltoolkit.codeplex.com/workitem/26995
What happens is the HTMLEditorExtender sets a page-level style attribute to its container with these attributes:
width: 0;
height: 0;
This, to my knowledge is what is causing the control to be extremely narrow inside the modal. Using the CSS provided below fixes the issue, but it is very messy and involves the use of the !important keyword that I try to avoid in my stylesheets. I had to first wrap the textbox and HTMLEditorExtender in a div, and apply a class to it. For the intents of this, I'll just call that class "fix".
.fix > div
{
height:inherit !important;
width:inherit !important;
}
.fix > div > .ajax__html_editor_extender_texteditor
{
height:200px!important;
}
Thank you,
-Anthony
Comments: Hi All, I tried this script in my page, <script type="text/javascript"> Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype._editableDiv_submit = function() { //html encode var char = 3; var sel = null; try { this._editableDiv.focus(); } catch(e) { } if (Sys.Browser.agent != Sys.Browser.Firefox) { if (document.selection) { sel = document.selection.createRange(); sel.moveStart('character', char); sel.select(); } else { sel = window.getSelection(); sel.collapse(this._editableDiv.firstChild, char); } } //Encode html tags this._textbox._element.value = this._encodeHtml(); }; </script> but i'm getting error in sel.collapse(this._editableDiv.firstChild, char); as 0x80070057 - JavaScript runtime error: Invalid argument. Please suggest me.....
Issue #1 Display None
Note - This only occurs in Internet Explorer 8 to my knowledge. This does NOT occur in Internet Explorer 9 utilizing compatibility mode to view the page in Internet Explorer 8.
I believe I've recently found an issue with using the HTMLEditorExtender control. It would seem as the display none css attribute, displayed below, causes a javascript error to occur.
display:none;
When this is used on a container around the control and a partial postback occurs, this javascript error is thrown: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
I know that this is a problem if this control is used in a jQueryUI modal, but I also believe that this is an issue with a CollapsiblePanelExtender when it is collapsed.
Issue #2 Width
The second issue seems to come when the HTMLEditorExtender is placed in a jQueryUI modal, and I've seen another help issue found here showing that it also occurs on the ModalPopupExtender:
http://ajaxcontroltoolkit.codeplex.com/workitem/26995
What happens is the HTMLEditorExtender sets a page-level style attribute to its container with these attributes:
width: 0;
height: 0;
This, to my knowledge is what is causing the control to be extremely narrow inside the modal. Using the CSS provided below fixes the issue, but it is very messy and involves the use of the !important keyword that I try to avoid in my stylesheets. I had to first wrap the textbox and HTMLEditorExtender in a div, and apply a class to it. For the intents of this, I'll just call that class "fix".
.fix > div
{
height:inherit !important;
width:inherit !important;
}
.fix > div > .ajax__html_editor_extender_texteditor
{
height:200px!important;
}
Thank you,
-Anthony
Comments: Hi All, I tried this script in my page, <script type="text/javascript"> Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype._editableDiv_submit = function() { //html encode var char = 3; var sel = null; try { this._editableDiv.focus(); } catch(e) { } if (Sys.Browser.agent != Sys.Browser.Firefox) { if (document.selection) { sel = document.selection.createRange(); sel.moveStart('character', char); sel.select(); } else { sel = window.getSelection(); sel.collapse(this._editableDiv.firstChild, char); } } //Encode html tags this._textbox._element.value = this._encodeHtml(); }; </script> but i'm getting error in sel.collapse(this._editableDiv.firstChild, char); as 0x80070057 - JavaScript runtime error: Invalid argument. Please suggest me.....