CODEWITHSUNDEEP
sencha-touch
Ruy Diaz
Ruy Diaz

Reputation: 3122

How can I center emptyText in the middle of the screen in a List in Sencha Touch?

I recently discovered the emptyText config value for lists in Sencha Touch to display when the store is empty. The problem I am having is that this text appears in the top left corner and I can't seem to find a way to place it in the middle of the screen.

enter image description here

Upvotes: 4

Views: 3553

Answers (1)

stan229
stan229

Reputation: 2607

The emptyText property accepts HTML. Example:

CSS: 
.emptyText {
    text-align:center;
    color: #999;
}


JS:
emptyText: '<div class="emptyText">No members yet</div>'

For vertical centering you will have to use the CSS3 Flexible box model

Example CSS:

//vertical and horizontal centering based on fixed height
    height:200px;  
    display:-webkit-box;
    -webkit-box-orient: horizontal;        
    -webkit-box-align:center;
    -webkit-box-pack:center;

Upvotes: 6

Related Questions