Ajax HtmlEditorExtender can't retain size when placed inside hidden panel on page load

vasanth15 commented 4 years ago

The AJAX Control Toolkit \<20.1.0>

The installation method

[* ] NuGet package

Minimal steps to reproduce the bug

Place HtmlEditorExtender targeting a textbox inside a panel and set the display property of panel to none using cssStyle,
Verify that when the page loads, the panel is hidden.
On button click, using javascript, change the display property of panel to block which makes the panel and items inside panel visible.
Verify that all items inside panel grows back in size except HtmlEditorExtender.

CssStyle of panel:

    .auto-panel_property{
        display: none;
    }

HTML code:

<asp:panel ID="hidden_pnl" runat="server" CssClass="auto-panel_property">
    <asp:TextBox ID="email_box" runat="server" CssClass="auto-style119" TextMode="MultiLine"></asp:TextBox>
    <asp:HtmlEditorExtender ID="email_box_HtmlEditorExtender" EnableSanitization="true"
            runat="server" TargetControlID="email_box">
        <Toolbar>
            <ajaxToolkit:Undo />
            <ajaxToolkit:Redo />
            <ajaxToolkit:FontNameSelector />
        </Toolbar>
    </asp:HtmlEditorExtender>
</asp:panel>

if .auto-panel_property is modified to block, the rendering is fine but again, making it hidden through javascript on page load makes the user experience bit clumsy.

.auto-panel_property{
    display: block;
}

Actual result

The size of HtmlEditorExtender loses size when panel display property is set to none when page loads.

Expected result

The size of HtmlEditorExtender should retain shape irrespective of the panel display property.

Browser(s) used

Fails on chrome, edge.

A site deployment method

[*] Interserver
[*] IIS Fails on both above mentioned servers.!

Ulf-Ason commented 3 years ago

Good morning, Dev Express! 9 months later and no reactions. If you have left this repo - just tell us!

au5ton commented 1 year ago

I am experiencing this bug as well.

I believe the bug is rooted in this line here:

https://github.com/DevExpress/AjaxControlToolkit/blob/d3ad8d0822c4584b8ebf54d041bb514b0007d1c2/AjaxControlToolkit/Scripts/HtmlEditorExtender.js#L343-L347

The getBounds() call uses HTMLElement.offsetWidth, which can be 0 if the element is hidden by some ways.

https://github.com/DevExpress/AjaxControlToolkit/blob/d3ad8d0822c4584b8ebf54d041bb514b0007d1c2/AjaxControlToolkit.Jasmine/Scripts/MicrosoftAjax.debug.js#L4214-L4224

Because the element is hidden, when it initializes the editor sets itself to a fixed size of zero. I'm kind of surprised that HtmlEditorExtender sets itself to a fixed size and is never updated.

DevExpress / AjaxControlToolkit