1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Exclamation Answered: Problem customizing the list disclosure icon

    Answered: Problem customizing the list disclosure icon


    I am trying to customize the list disclosure icon. However, the icon is not displaying correctly. It shows up as a solid circle which I think indicates some sort of masking issue. What is the correct way to do this or have I come across a bug in PR1?

    This is the CSS I used. The encoded image is the 'blahblah' part...

    Code:
    .x-list-disclosure {
        -webkit-mask-box-image: url('data:image/png;base64,blahblahblah....');
    }

  2. Ciao Andrea. Grazie. However, the problem was that the image was not in the correct format. Apparently, it is a 60x60 monochrome image with transparent pixels for the white areas. I am not sure why. Because I had no transparent pixels, the icon appeared as a solid opaque circle instead of a circle with an arrow in it.

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi robi.
    I usually use Sass and Compass to give my application a custom theme.
    If you are using Sass you con do that in this way:

    Code:
    .x-list {
        .x-list-disclosure { 
          -webkit-mask-image: theme_image($theme-name, 'your_disclosure_pic.png') !important; 
        }
    }
    Where $theme-name is a variable which contain a value of "default" by default.
    In this way, you only need to put your "your_disclosure_pic.png" inside the "themes/images/default" folder and compile your theme.

    (You can even set another variable name to point to another folder different from the default one),

    If you want do that directly using CSS, you can do the same defining

    Code:
    .x-list-disclosure { 
        -webkit-mask-image: url('data:image/png;base64,blahblahblah....');
    }
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    Ciao Andrea. Grazie. However, the problem was that the image was not in the correct format. Apparently, it is a 60x60 monochrome image with transparent pixels for the white areas. I am not sure why. Because I had no transparent pixels, the icon appeared as a solid opaque circle instead of a circle with an arrow in it.

  5. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Di nulla figurati
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


Thread Participants: 1

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