Search code examples
sencha-touchsencha-touch-2

Sencha Trouch 2: hbox titlebar items getting trimmed

I have 2 button inside a titlebar as below

xtype: 'titlebar',
            cls: 'toolbar',
            docked: 'top',
            itemId: 'lookupBar',
            layout: {
                type: 'hbox',
                align: 'end'
            },
            items: [
                {
                    xtype: 'button',
                    flex: 1,
                    itemId: 'btnBack',
                    ui: 'back'
                },
                {
                    xtype: 'button',
                    flex: 1,
                    align: 'right',
                    itemId: 'btnEntitySearch',
                    ui: 'forward'
                }
            ]

But if Text in this 2 button is large, then 2nd button getting trimmed , enter image description here

After looking in generated CSS, I can see that for first button we have a " -webkit-box-flex: 1; width: 128px !important; "

but it was not for 2nd button !!!

Any Idea what is wrong here ?

Additional images after applying Answers

in case of small text, nothing comes up

Solution

  • I guess, you want to shrink the button if the text go large. You can simply apply ellipsis on button label as below, Apply this in your css file:

    .x-toolbar .x-button-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}

    EDIT:

    Another trick: Use this css only

    .x-toolbar-inner .x-container {
    max-width: 45%;
}

    This will work in all profile whether mobile or tablet