[FIXED] [#885] [3.3] HtmlEditor issue: vertical scroll bar

  1. #1

    [FIXED] [#885] [3.3] HtmlEditor issue: vertical scroll bar

    Hi,

    This is related to http://forums.ext.net/showthread.php...d=1#post274443. Please run the test case below to observe that a vertical scroll bar appears in IE11 after clicking the "Toggle" button.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                HtmlEditor1.Text = "Some text goes here...";
            }
        }
    </script>
    <style>
        .x-theme-blue .read-only-htmleditor {
            color: #696969;
            border-width: 1px;
            border-style: double;
            border-color: #C6CBDA;
            background-color: #F2F6FB;
            width: 100%;
        }
    
        .read-only-htmleditor .x-html-editor-input {
            border-top-width: 1px;
        }
    </style>
    <script type="text/javascript">
        var onDocumentReady = function () {
            App.TextArea1.setVisible(false);
            App.HtmlEditor1.addCls('read-only-htmleditor');
            App.HtmlEditor1.getToolbar().hide();
            App.HtmlEditor1.setAnchor("100% -50", true);
        };
    
        var showHide = function () {
            if (App.TextArea1.hidden) {
                App.TextArea1.setVisible(true);
                App.HtmlEditor1.setAnchor("100% -255", true);
            }
            else {
                App.TextArea1.setVisible(false);
                App.HtmlEditor1.setAnchor("100% -50", true);
            }
        };
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <DocumentReady Fn="onDocumentReady"></DocumentReady>
                </Listeners>
            </ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:FormPanel runat="server" Padding="10" ButtonAlign="Left" Frame="false" Border="true">
                        <Items>
                            <ext:ToolbarSpacer Height="5"></ext:ToolbarSpacer>
                            <ext:TextArea ID="TextArea1" runat="server" AutoScroll="true"
                                AnchorHorizontal="100%" FieldLabel="My Notes" Height="200" MaxWidth="685"
                                SubmitValue="false" EnableKeyEvents="true" AllowBlank="false">
                            </ext:TextArea>
                            <ext:HtmlEditor
                                ID="HtmlEditor1"
                                runat="server"
                                AutoScroll="true"
                                AnchorHorizontal="100%" FieldLabel="Notes" MaxWidth="685" Cls="read-only-htmleditor"
                                SubmitValue="false" EnableKeyEvents="true" ReadOnly="true">
                            </ext:HtmlEditor>
                        </Items>
                        <BottomBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Toggle">
                                        <Listeners>
                                            <Click Fn="showHide"></Click>
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 28, 2015 at 1:46 PM. Reason: [FIXED] [#885] [3.3]
  2. #2
    Hi Vadym,

    Thank you for the report!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/885

    Please try this override:
    Ext.layout.component.field.HtmlEditor.override({
        finishedLayout: function () {
            var body;
    
            this.callParent(arguments);
            body = this.owner.getDoc().body;
                    
            if (body) {
                body.style[Ext.isIE8 ? "height" : "minHeight"] = this.owner.iframeEl.getHeight() + "px";;
            }
        }
    });
  3. #3
    Thanks for the workaround fix, Daniil!
  4. #4
    Decided to commit to SVN - revision #6553 (trunk). It goes to 3.3.

Similar Threads

  1. [CLOSED] TreePanel's vertical scroll
    By RCN in forum 3.x Legacy Premium Help
    Replies: 10
    Last Post: Jan 14, 2015, 11:45 AM
  2. Replies: 8
    Last Post: Jun 06, 2013, 12:42 PM
  3. [CLOSED] Vertical scroll bar issue in Tree grid for FireFox only
    By Aparna_B in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 25, 2013, 8:52 AM
  4. Problem with Vertical Scroll in GridPanel
    By vnmacedo in forum 2.x Help
    Replies: 3
    Last Post: Nov 19, 2012, 3:04 PM
  5. [CLOSED] Vertical scroll bar issue for treegrid
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 02, 2012, 8:30 AM

Tags for this Thread

Posting Permissions