Results 1 to 7 of 7

Thread: Setting padding in config in ems doesn't work?

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2409 in a recent build.
  1. #1
    Sencha User ilija139's Avatar
    Join Date
    Aug 2011
    Location
    Macedonia
    Posts
    36

    Default Setting padding in config in ems doesn't work?

    Is this by design?
    Code:
    {
       xtype:'component',
       padding: '10em' //this does nothing
       //padding: '10px' //this sets the padding to 10px
    }

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Using this code:

    Code:
    new Ext.Container({
        fullscreen : true,
        layout     : 'fit',
        items      : [
            {
                xtype   : 'component',
                padding : '10em',
                html    : 'Test'
            }
        ]
    });
    It does add a padding but as 10px not 10em. I'm going to open a bug ticket for this but one would argue that you should do the padding in a component via CSS.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User ilija139's Avatar
    Join Date
    Aug 2011
    Location
    Macedonia
    Posts
    36

    Default

    I agree that is best to use CSS, but then why is the property there in the first place

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Quote Originally Posted by ilija139 View Post
    I agree that is best to use CSS, but then why is the property there in the first place
    That's why I opened a bug. It says it can accept a string like '10 10 5 5' but it expects it to always be in pixels but em is very useful.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User ilija139's Avatar
    Join Date
    Aug 2011
    Location
    Macedonia
    Posts
    36

    Default

    Quote Originally Posted by mitchellsimoens View Post
    but em is very useful.
    Exactly, thanks!

  6. #6
    Sencha User ilija139's Avatar
    Join Date
    Aug 2011
    Location
    Macedonia
    Posts
    36

    Default Here is the full bug report.

    REQUIRED INFORMATION

    Sencha Touch version tested:
    • Sencha Touch 2.0.0
    Browser versions tested against:
    • Chrome 18
    Operating System:
    • Mac OS X
    Description:
    • Setting margin or padding via config or by using the set methods ignores the units passed
    Steps to reproduce the problem:
    • Set padding or margin to a component with different units than pixels
    • Observe that no matter what units you'll use the property value is in pixels
    The result that was expected:
    • To use the units provided
    The result that occurs instead:
    • Always sets the unit to pixels
    Test Case:

    Code:
    new Ext.Container({
        fullscreen : true,
        layout     : 'fit',
        items      : [
            {
                xtype   : 'component',
                padding : '10em',
                html    : 'Test'
            }
        ]
    });
    HELPFUL INFORMATION

    Possible fix:

    All of these methods are static methods of the Ext.dom.Element class. (http://docs.sencha.com/touch/2-0/sou...nt.static.html)

    Code:
      /**
         * Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
         * @param size {Object} The size to set
         * @param units {String} The units to append to a numeric size value
         * @private
         * @static
         */
         addUnits: function(size, units) {
    
            // Should check here if the units are valid and print warning if not (see the test below).      
    
            // Most common case first: Size is set to a number
            if (Ext.isNumber(size)) {
                return size + (units || this.defaultUnit || 'px');
            }
    
            // Size set to a value which means "auto"
            if (size === "" || size == "auto" || size === undefined || size === null) {
                return size || '';
            }
    
            // Otherwise, warn if it's not a valid CSS measurement
            if (!this.unitRe.test(size)) {//unitRe could be undefined, see the unitizeBox method below 
                 //The warning should be not a valid property value, since '1px' passes this test and it's NaN. 
                //<debug>
                Ext.Logger.warn("Warning, size detected as NaN on Element.addUnits.");
                //</debug>
                return size || '';
            }
            return size;
        },
    Code:
        /**
         * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
         * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
         * @static
         * @param {Number/String} box The encoded margins
         * @return {Object} An object with margin sizes for top, right, bottom and left
         */
         parseBox: function(box) {
            if (typeof box != 'string') {
                box = box.toString();
            }
    
            var parts = box.split(' '),
                ln = parts.length;
    
            if (ln == 1) {
                parts[1] = parts[2] = parts[3] = parts[0];
            }
            else if (ln == 2) {
                parts[2] = parts[0];
                parts[3] = parts[1];
            }
            else if (ln == 3) {
                parts[3] = parts[1];
            }
       //No need to use parseFloat here, since addUnits will take care of that.
       // In fact this is where the unit information is lost. 
       // Just return parts[0] || 0 to fix the bug. 
            return {
                top: parseFloat(parts[0]) || 0,
                right: parseFloat(parts[1]) || 0,
                bottom: parseFloat(parts[2]) || 0,
                left: parseFloat(parts[3]) || 0
            };             
        },
    Code:
     /**
         * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
         * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
         * @static
         * @param {Number/String} box The encoded margins
         * @param {String} units The type of units to add
         * @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
         */
        unitizeBox: function(box, units) {
            var a = this.addUnits,
                b = this.parseBox(box);
           //Calling addUnits like this changes the scope so this.unitRe is undefined and doesn't validate the unit. 
         //Delete 'a' and call it directly, i.e. this.addUnits(b.top,units) 
            return a(b.top, units) + ' ' +
                a(b.right, units) + ' ' +
                a(b.bottom, units) + ' ' +
                a(b.left, units);
    
    
        },
    There are better ways to solve this, but this solution makes minimum number of changes to the existing functions.

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243

    Default

    Hi ilija139,

    Thanks for doing much of the legwork here. I have changed the static methods on Element slightly, similarly to what you suggested, to support these different units to be set.

    Thanks for the report and work.

    Best,
    Tommy

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •