Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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; }
like image 812
rd42 Avatar asked Nov 13 '22 00:11

rd42


1 Answers

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 */
}
like image 188
Spadar Shut Avatar answered Dec 15 '22 13:12

Spadar Shut