1. #1
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192
    Vote Rating
    0
    jmaia is on a distinguished road

      0  

    Default Problems with field width after upgrading to 4.1

    Problems with field width after upgrading to 4.1


    Hello there,

    I just updated from 4.0.7 to 4.1 and started having a problem with field width. Some fields suddenly have lower widths than they had before.

    This happened on some extensions I had created (mainly extensions from combobox class) but also on common Ext.form.field.Text fields.

    I still can't figure out a pattern to this behavior, but one thing I noticed was that it happens when the field is validated. If I have msgTarget = side, and the user input validation is incorrect, the field width is suddenly smaller, and once I input a valid value it returns to its normal size.

    Anyone experienced this weird behavior ?

    I will try to find out more in order to open a case, but if in the meantime someone can give me some pointers, maybe I can figure it out.

    Thanks,

    Joao Maia

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    544
    Vote Rating
    96
    Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light

      0  

    Default


    Hard to say without seeing code, but make sure you don't have any old overrides, css, or themes from 4.07 that could be affecting it.

  3. #3
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192
    Vote Rating
    0
    jmaia is on a distinguished road

      0  

    Default


    Here's an example of a the configuration of a form panel that I have where this behavior occurs:

    Code:
    {
    	xtype        :'form',
    	bodyPadding  :10,
    	frameHeader  :false,
    	fieldDefaults:{
    		labelWidth   :125,
    		padding      :'3 0 3 0',
    		msgTarget    :'side',
    		allowBlank   :false,
    		selectOnFocus:true,
    		anchor       :'100%',
    		labelAlign   :'top'
    	},	
    
    
    	items:[		
    		{
    			// new password field
    			xtype     :'textfield',
    			id        :'new-password',
    			name      :'newPassword',
    			fieldLabel:'New Password',
    			inputType :'password',
    			blankText :'This field is required'
    		},
    		{
    			// confirm password field
    			xtype           :'textfield',
    			name            :'confirmPassword',
    			fieldLabel      :'Confirm Password',
    			inputType       :'password',
    			blankText       :'This field is required',
    			vtype           :'password',
    			initialPassField:'new-password' // id of the initial password field
    		}
    	]
    }

    When you tab out of the first field without filling it, since it has allowBlank: false, it will trigger the validation and the sudden shrinking of its width...

    It does not have anything fancy, no aditional css, or any overrides, that I can see.

    Regards,

    Joao Maia

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    544
    Vote Rating
    96
    Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light

      0  

    Default


    Looks like you found a bug. I played around with it a little. As you noted, it is an odd combination to cause it.

    I think this is the basic recipe
    Code:
    fieldDefaults:{
            msgTarget    :'side',
            allowBlank   :false,
            anchor       :'100%',      //Can be any percentage
            labelAlign   :'top'
    }
    If you remove the anchor, align the label differently, or don't use a side msgTarget it won't happen. If I was in your situation, I would just remove the msgTarget so that the user needs to hover to see the validation error. Kinda funky having a side target on 100% width anyway. You may want to file a bug too.

Thread Participants: 1

Tags for this Thread