CODEWITHSUNDEEP
sencha-touch-2titlebarellipse
rd42
rd42

Reputation: 3594

Sencha touch 2 title ellipsis

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; }

Upvotes: 5

Views: 1285

Answers (1)

Spadar Shut
Spadar Shut

Reputation: 15827

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 */
}

Upvotes: 1

Related Questions