CODEWITHSUNDEEP
sencha-touch
David
David

Reputation: 237

How to make 'onItemDisclosure' arrow for a list appear in the middle of the item (vertically)

Setting on onItemDisclosure to true in the configuration options for my list makes the arrow appear but it is at the top of the list rather than at the middle. If the list items were of a fixed height I could add margin to put it lower down but because each item of the list can vary in height this won't be suitable.

Any ideas gratefully received.

Thanks.

Upvotes: 0

Views: 2969

Answers (3)

andriys
andriys

Reputation: 2222

To get true centering:

.x-list .x-list-disclosure {
    height: auto;
    -webkit-mask-position-y: center;
    margin-top: 0;
}

Upvotes: 0

Swar
Swar

Reputation: 5503

Use following for the parent item css and will work best ever:

display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;

This is webkit specific and works perfectly with Sencha Touch. So, the code will be:

.x-list .x-list-item{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

Upvotes: 0

ilija139
ilija139

Reputation: 2974

To this css rule .x-list .x-list-disclosure add position: relative; top: 28%; or any percent you want. You can add this inline in the index.html after the main css file.

Upvotes: 1

Related Questions