1. #1
    Sencha User dekely's Avatar
    Join Date
    Aug 2008
    Posts
    215
    Vote Rating
    3
    Answers
    4
    dekely is on a distinguished road

      0  

    Default Unanswered: radiofield style - help

    Unanswered: radiofield style - help


    Hi All,
    I need to apply iphone style to the radio button which means:

    1. hide the gray icon when not selected
    2. change the check icon to a smaller check
    3. when you tap the row, the row background will be changed for a second.

    Appreciate any assistance or tips

    Dekel
    Best regards,
    Dekel.y
    http://www.puzzlescramble.com

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    21
    Vote Rating
    1
    Answers
    1
    supersaiyen is on a distinguished road

      0  

    Default Radio Image

    Radio Image


    Here's the CSS for the image mask, took me a while to find the right combination:

    Code:
    .x-checkmark-base.x-input-radio{//so simple, yet so hard to find -.-
      -webkit-mask-image: inline-image('icons/radio.png');
    }

  3. #3
    Sencha User dekely's Avatar
    Join Date
    Aug 2008
    Posts
    215
    Vote Rating
    3
    Answers
    4
    dekely is on a distinguished road

      0  

    Default


    I'm afraid it doesn't work, I also tried

    Code:
    .x-checkmark-base.x-input-radio{ 
      -webkit-mask-image: url("../images/More_25x25_Grayed.png");
    }
    Best regards,
    Dekel.y
    http://www.puzzlescramble.com

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    21
    Vote Rating
    1
    Answers
    1
    supersaiyen is on a distinguished road

      0  

    Default


    Sorry, meant to say that was SCSS, here's the full CSS snippet

    Code:
    .x-checkmark-base.x-input-radio, .x-field .x-input-radio::after, .x-field .x-input-radio.x-input-checkbox::after, .x-field .x-input-radio:checked::after, .x-field .x-input-radio.x-input-checkbox:checked::after, .x-field.x-item-disabled .x-input-radio:checked::after, .x-field.x-item-disabled .x-input-radio.x-input-checkbox:checked::after, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::before, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::after {
                    -webkit-mask-image: url('resources/images/icons/radio.png');
                }
    You can also (as the SCSS does, base-64 encode your image to save a request:
    Code:
    .x-checkmark-base.x-input-radio, .x-field .x-input-radio::after, .x-field .x-input-radio.x-input-checkbox::after, .x-field .x-input-radio:checked::after, .x-field .x-input-radio.x-input-checkbox:checked::after, .x-field.x-item-disabled .x-input-radio:checked::after, .x-field.x-item-disabled .x-input-radio.x-input-checkbox:checked::after, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::before, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::after {
     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAElElEQVRoBe2bTWsVVxiAvYlGLRWsVtQ2CKlBYqClKtoiiAtD6aa4cyWKv6ALNy39HUK3XYiIFCoilPqxcCFqqYpC6wfBhdZSPxa2Vk2qTZ/nOHO9Ge/c75vMPfGF586dmTvnvE/OzJmZM5PS1NTUvG5FqVRaTNkD8Ba8D0PwAiqjn5lb8Ds8gUlyesq0K1HqtDCSir0HH8On8CFshkbiZ350Fc7BZbhLfv4hOhYdE0Z0K1lthJ3wCSyBduJvNj4PR+Ei4mfbKay8rS3cDhSk4BF4CB4f3cCyrWNnO7m6bUuyVNwHW+AwPID/oBuilWVah3VZp3X3tSLftDAVLYVvwGNrJkQrpf1undZtDkublW5KmAo2wEGwN80mMtPz5mAuG5qRbliYgvfCdfC0MtNyefWZizntbVS6IWEK3A93YTZ24TzZdLk5mdv+RqRrClOIFwVfgZ1FWkFRp+Zorv21xHOF2dCeeB/ch6JKZvMyV3PO7cFrCXsh8RsU6ZjNCmbnzdWct+a1clVhNlgHP8FzyBZa9HlzNvd11aRfE+aHXvB/C39B0eXy8jN3HRZnpacJ84MS7IabUMQeOU8wu9zcddAl3C+k4lnhUX5wEiYgW0ivzeugy2gq69SeOAR3O56CdsFHMBAW9vaHDrrsStyCTVmYuQ9gG7wT1sTxoYtOuoUIwvwF5jO3HdaC32MJXXTanjiWd+mVLByDFRBb6KSbjvP6MLdnHgH3d8eeYguddBvR1V3ag3sHxNi6aIXQTccBhReAY1He2Mcauum4QOE1sBpi6qzQmRa66bhG4WGIuXXRC6HjsMKD8HZYFPeHjoMKr4IYe+ds8+m4SuHlsCi7NsJ5HZcr7Hl4rkQ4D88V2eBpC8+peCMce3PbwpPgkEjsoeOkwvfA5zSxh473FL4Nj2O3TRxvKzwOj+aAsI7jCjucmT47itXbEVcdbyrs7nwd/oFYQzcdHys8AafAB1Gxhm46TviUze76EvwJMZ6edNLtkq62sHEHToD7eWyhk246vhymxdx3omxy/xKxhU6nEsfyuLSSv8I1eOpMJKGLTrqFSHdpH6p5YB+CG/AirO3tDx10OZS4BZuycOJ2nOkZiOHKSwdddHoV2Gcfma5n7Wn4F3rtEWmar7nrsP41v+wC54k9cAvSAnptau57qrpVXfhyUP5LNurF1x7M2dznV3WrttBlxDL4Dryt6pUWNldzXpbrlbcikXaQ/ig8g6JLm6O5DtZ0qrUykfZRzA9QZGlzM8fhuj71flAh/X1BpZU1t7qywaUR4UTah1Ffg5dqXpDP9i5uDuZiTg2/Nz3tHFxPnoIXwudwEZ7DbElbtzmYy8J6eVeub0o43ZBKhuAAeAcyk61tXdZp3UNpPs1MWxJOK6DSMbBn9Dq8m+KWbR3WNZbW38q07X/j4T2RfpLYBF+Au5ivFmSv0VnUUijqrvsjHINfkGzrxqZtYZIIgbjvinjeHoXPwNYfgWbllbwGJ8G3Yr21u4Oo18dtR8eEKzNB3s7NB9CrwVeGtsBaeDfB78Y4OCIhfr8AV+APeIKk420djf8Bja0Xegposi8AAAAASUVORK5CYII=');
                }

Thread Participants: 1