Question

The titles on the table view have ellipsis although the horizontal space is huge. I see it in the default-style.css under .x-title .x-innerhtml. What is the proper way to adjust when it ellipses? and also if your feeling frisky the method I should use to find the answer in a situation like this would be helpful. For example, I went to the API doc for sencha and found Ext.String.ellipsis, Ext.util.Format.ellipsis, and Global_CSS.ellipsis. I see the documentation but am not sure how to approach actually changing the way ellipsis are handled.

                items: [
                        {
                            xtype: 'container',
                            title: 'Bla Mobile',
                            layout: {
                                type: 'vbox',
                                pack: 'start',
                                align: 'center'
                            },

EDIT:
I added this to my style.css to fix it:

.x-title { padding:0 .3em; }

.x-title .x-innerhtml { padding: 0; }

Answer 1

This seems to ba a bug in webkit, I came up with this solution:

.x-title .x-innerhtml:after {
    content: '';
    display: inline-block;
    width: .3em; /* equal to the amount of padding on the element */
}