Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    557
    Vote Rating
    25
    estesbubba will become famous soon enough estesbubba will become famous soon enough

      0  

    Default [INVALID] Buttons in hbox with flex 1 not calculating width correctly

    [INVALID] Buttons in hbox with flex 1 not calculating width correctly


    Simple test case - text is being clipped.

    Code:
    Ext.setup({
        onReady: function(options) {
            Ext.Viewport.setActiveItem({
            xtype: 'panel',
            layout: {
                type : 'vbox',
                align: 'middle'
            },
    
    
            items: [{
                    xtype: 'component',
                    html: 'Welcome'
                }, {
                    xtype: 'container',
                    layout: {
                        type: 'hbox'
                    },
                    items: [{
                        xtype: 'button',
                        flex: 1,
                        text: 'Phone Number',
                        itemId: 'phoneButton',
                        cls: 'c-button',
                        iconCls: 'action',
                        iconMask: true,
                        iconAlign: 'top'
                    }, {
                        xtype: 'button',
                        flex: 1,
                        text: 'Account',
                        itemId: 'accountButton',
                        cls: 'c-button',
                        iconCls: 'action',
                        iconMask: true,
                        iconAlign: 'top'
                    }, {
                        xtype: 'button',
                        flex: 1,
                        text: 'Scan Bar Code',
                        itemId: 'scanButton',
                        cls: 'c-button',
                        iconCls: 'action',
                        iconMask: true,
                        iconAlign: 'top'
                    }]
                }]
            });
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thank you for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    This is the correct behavior.

    Note that in Sencha Touch's Box Layout implementation, when you give a flex number to the items, the ratio are respected. Three items all with flex: 1 means all their sizes are equally divided. If you want an item to have its natural size, simply don't give it a 'flex' config.
    Sencha Touch Lead Architect

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    557
    Vote Rating
    25
    estesbubba will become famous soon enough estesbubba will become famous soon enough

      0  

    Default


    What I want is all of the buttons to have the same size without clipping. It seems in Ext JS that giving flex: 1 would make all the buttons the same size as the largest one and adjust the container. Does Touch not do the same? The parent container definitely has room to grow.