[OPEN] [#1822] Button alignments in textfield using Material theme

  1. #1

    [OPEN] [#1822] Button alignments in textfield using Material theme

    Hi Sir,

    While I was walking through Ext.Net Examples using Material theme and I found the issue related to the buttons alignments in text field.

    If user add the button right to textfield but still its add to left side of text field and I have attached screen shot for your quick reference.

    Note : I found issue only using Material theme.

    Thank you,
    Vamsi.
    Attached Thumbnails Click image for larger version. 

Name:	TextField_Buttons.png 
Views:	88 
Size:	77.3 KB 
ID:	25327  
  2. #2
    Thanks for pointing out the issue. We will investigate.
    Geoffrey McGill
    Founder
  3. #3
    Thank you,

    I'm having same issue with Material theme in my webApp, Can you please fix this ASAP.

    Note : I have attached examples screenshot for quick reference only.

    Thanks,
    Vamsi.
  4. #4
    Hello @Vamsi!

    We have logged the issue in github under #1822, and will post a follow-up as soon as we have this merged and ready for the next Ext.NET release.

    Meanwhile, you can work this issue around by using this override:

    Ext.define("Ext.net.theme.material.form.field.Text", {
        override: "Ext.form.field.Text",
    
        listeners: {
            change: function (field, value) {
                if (field.el) {
                    field.el.toggleCls('not-empty', value || field.emptyText || field.leftButtonsAffectsLabel());
                }
            },
    
            render: function (ths, width, height, eOpts) {
                if ((ths.getValue() || ths.emptyText || ths.leftButtons || ths.leftButtonsAffectsLabel()) && ths.el) {
                    ths.el.addCls('not-empty');
                }
            }
        },
    
        leftButtonsAffectsLabel: function () {
            var me = this;
    
            return Ext.isArray(me.leftButtons) && me.leftButtons.length > 0 &&
                me.labelAlign == "top" && me.leftButtonsShowMode &&
                me.leftButtonsShowMode != "focus" && me.leftButtonsShowMode != "nonblank";
        },
    
        addButton: function (button, side) {
            var me = this,
                ctRef = (side || "right") + "ButtonsCt",
                hadCtRef = false,
                retVal;
    
            if (!me[ctRef]) {
                hadCtRef = false;
            }
    
            retVal = me.callParent(arguments);
    
            if (!hadCtRef && me[ctRef]) {
                me[ctRef].el.setStyle("width", "unset");
            }
    
            if (side == "left" && me.leftButtonsAffectsLabel() && !me.hasCls("not-empty")) {
                me.addCls("not-empty");
            }
    
            return retVal;
        }
    });
    Let us know if even with the above fix the issue is still reproducible or some unexpected visual behavior is still present in the related component and functionality.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Jun 24, 2020, 10:43 PM
  2. [CLOSED] Changing the grid inline editor height in Material Theme
    By baruch.gabo in forum 5.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 24, 2020, 4:43 PM
  3. [FIXED] [#1650] New Theme Material Issue
    By Master15 in forum Bugs
    Replies: 5
    Last Post: Sep 20, 2019, 1:14 PM
  4. Small bug in Ext.Net 5 examples (Material Theme)
    By CarWise in forum Examples and Extras
    Replies: 1
    Last Post: Sep 19, 2019, 8:13 PM
  5. Replies: 10
    Last Post: Feb 20, 2017, 1:51 PM

Posting Permissions