1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Answers
    7
    Vote Rating
    2
    UbuntuPenguin is on a distinguished road

      0  

    Default Answered: Vertically Align List Disclosure Icon.

    Answered: Vertically Align List Disclosure Icon.


    Hello Everyone,
    I have a list with a custom itemTpl. I would like to have the disclosure icon vertically aligned in the middle of the x-list-item-label(?). I have tried all sorts of CSS voodoo but can't seem to get it to work. Below is the absurdly sized image of what I am talking about. Here is an example of CSS that I tried that failed miserably while the disclosure icon laughed back at me.

    Code:
    .navigation_list .x-list-item
    {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        /* The content of the body is horizontally centered */
        -webkit-box-pack: start;
        /* and vertically as well ... \o/ */
        -webkit-box-align: center;
        width: 100%;
        height : 100%;
    }
    
    
    .navigation_list .x-list-item
    {
        width: 100%;
    }
    
    
    .navigation_list .x-list-item .x-list-disclosure
    {
        vertical-align: middle;
        position: static;
    }
    Any help is greatly appreciated.

    ListDisclosureIconMisbehavior.png

  2. The answer went something like this. The icon is still off center, but I can fight with it to get it right.

    Code:
    .navigation_box
    {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        /* The content of the body is horizontally centered */
        -webkit-box-pack: start;
        /* and vertically as well ... \o/ */
        -webkit-box-align: center;
        width: 100%;
        height : 100%;
    
    
    }
    .navigation_image{
        background: #eee;
        background-size: cover;
        background-position: center center;
    
    
        width: 80px;
        height: 80px;
    }
    .navigation_text{
        vertical-align: middle;
        flex : 1;
    }
    
    
    /*.navigation_list .x-list-item*/
    /*{*/
        /*display: -webkit-box;*/
        /*-webkit-box-orient: horizontal;*/
        /* The content of the body is horizontally centered */
        /*-webkit-box-pack: start;*/
        /* and vertically as well ... \o/ */
        /*-webkit-box-align: center;*/
        /*width: 100%;*/
        /*height : 100%;*/
    /*}*/
    .navigation_list .x-list-item
    {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }
    .x-list-item-label
    {
        width: 100pc;
    }
    .x-list .x-list-item{
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }
    
    
    .x-list .x-list-disclosure
    {
        bottom: 45%;
    }
    And my template looks like this

    Code:
            itemTpl: '<div class="navigation_box">' +
                            '<img class="navigation_image" src={ imageLocation }/>' +
                            '<div class="navigation_text">{navigationName}</div>' +
                      '<div>'

  3. #2
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Answers
    7
    Vote Rating
    2
    UbuntuPenguin is on a distinguished road

      0  

    Default


    The answer went something like this. The icon is still off center, but I can fight with it to get it right.

    Code:
    .navigation_box
    {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        /* The content of the body is horizontally centered */
        -webkit-box-pack: start;
        /* and vertically as well ... \o/ */
        -webkit-box-align: center;
        width: 100%;
        height : 100%;
    
    
    }
    .navigation_image{
        background: #eee;
        background-size: cover;
        background-position: center center;
    
    
        width: 80px;
        height: 80px;
    }
    .navigation_text{
        vertical-align: middle;
        flex : 1;
    }
    
    
    /*.navigation_list .x-list-item*/
    /*{*/
        /*display: -webkit-box;*/
        /*-webkit-box-orient: horizontal;*/
        /* The content of the body is horizontally centered */
        /*-webkit-box-pack: start;*/
        /* and vertically as well ... \o/ */
        /*-webkit-box-align: center;*/
        /*width: 100%;*/
        /*height : 100%;*/
    /*}*/
    .navigation_list .x-list-item
    {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }
    .x-list-item-label
    {
        width: 100pc;
    }
    .x-list .x-list-item{
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }
    
    
    .x-list .x-list-disclosure
    {
        bottom: 45%;
    }
    And my template looks like this

    Code:
            itemTpl: '<div class="navigation_box">' +
                            '<img class="navigation_image" src={ imageLocation }/>' +
                            '<div class="navigation_text">{navigationName}</div>' +
                      '<div>'

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar