[OPEN] [#881] TextArea's RightButtons vs Scroller

  1. #1

    [OPEN] [#881] TextArea's RightButtons vs Scroller

    On the following example, TextArea's RightButtons breaks Scroller.

    Click image for larger version. 

Name:	TextArea.png 
Views:	25 
Size:	2.8 KB 
ID:	24166

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager Theme="Gray" ScriptMode="Debug" runat="server" />
        <ext:TextArea FieldLabel="Field" Grow="true" GrowMin="38" GrowMax="110" runat="server">
            <RightButtons>
                <ext:Button Icon="ArrowUndo" runat="server" />
            </RightButtons>
        </ext:TextArea>
    </body>
    </html>
    Last edited by Daniil; Aug 25, 2015 at 11:12 AM. Reason: [OPEN] [#881]
  2. #2
    Hi @RCN,

    Thank you for the report!

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

    I am investigating.
  3. #3
    Please try this override:
    Ext.override(Ext.form.field.TextArea, {
        // #881
        updateFieldPadding: function () {
            this.callParent(arguments);
    
            if (this.bulkButtonsUpdate) {
                return;
            }
    
            if (this.rightButtons && this.rightButtonsCt) {
                if (this.inputEl.isScrollable()) { 
                    this.rightButtonsCt.setStyle("right", "25px");
                } else {
                    this.rightButtonsCt.setStyle("right", "0px");
                }
            }
        }
    });
    If it works well for you, I'll consider adding this to SVN.
  4. #4
    What about the following (line 12)?

    Ext.override(Ext.form.field.TextArea, {
        // #881
        updateFieldPadding: function () {
            this.callParent(arguments);
    
            if (this.bulkButtonsUpdate) {
                return;
            }
    
            if (this.rightButtons && this.rightButtonsCt) {
                if (this.inputEl.isScrollable()) {
                    this.rightButtonsCt.setStyle("right", this.inputEl.dom.offsetWidth - this.inputEl.dom.clientWidth + 1 + "px");
                } else {
                    this.rightButtonsCt.setStyle("right", "0px");
                }
            }
        }
    });
  5. #5
    Agree, it makes perfect sense.

    Actually, I had a look on the internet on determining a scrollbar width programmatically and saw quite a few concerns that a possible solution might be not cross browser. Well, I tested in all the browser that I have locally and it appears to be working very well in all.

    So, if no more improvements possible, I could commit a fix to SVN.

Similar Threads

  1. Tab Scroller Menu
    By RCN in forum Examples and Extras
    Replies: 0
    Last Post: Jan 29, 2015, 1:33 AM
  2. Replies: 6
    Last Post: Aug 12, 2014, 7:24 AM
  3. [CLOSED] textfield + RightButtons
    By John_Writers in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 03, 2013, 3:51 PM
  4. Replies: 3
    Last Post: Oct 16, 2012, 5:03 PM
  5. [CLOSED] IE9: No scroller for Column Portal in FitLayout
    By prointernet in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 12, 2011, 10:20 AM

Posting Permissions