1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    30
    Answers
    6
    Vote Rating
    2
    gendaful is on a distinguished road

      0  

    Default Answered: Not able to override default css class in custom css file

    Answered: Not able to override default css class in custom css file


    Hi.

    I am trying to change the default image in select field with my custom image. Below are the classes declared in sencha-touch-debug.css which needs to be overriden for this change.

    .x-selectmark-base, .x-field-select .x-component-outer:after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    top: 50%;
    left: auto;
    right: 0.7em;
    -webkit-mask-size: 1em;
    -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA....');
    margin-top: -0.5em;
    }




    /* line 634, ../themes/stylesheets/sencha-touch/default/widgets/_form.scss */
    .x-field-select .x-component-outer:after {
    background-color: #dddddd;
    }



    The highlighted red lines are responsible for applying the image and background respectively.


    I tried to override these styles in my css class file by declaring them once again in my css class but these 2 highlighted properties are getting the priority anyhow and in spite of giving priority = important in my custom css file, I am not able to override them in my custom css files. Please see, If I comment the highlighted lines in sencha-touch-debug.css then only custom css classes are applied.


    My Css class


    .x-selectmark-base,.x-field-select .x-component-outer:after {




    webkit-mask-image: url("../../resources/images/main_menu_arrow.png") !important;
    margin-top: -0.5em;

    }


    .x-field-select .x-component-outer:after {

    content: url("../../resources/images/main_menu_arrow.png") !important;
    margin-top: -35px !important;
    margin-right:8px !important;

    }


    Any ideas?

    Thanks
    Gendaful

  2. I was able to overcome this issue and applied following stylings to override the default styling by sencha and applied custom image on select field as below.


    User Defined CSS >> Applied following styling to override the default sencha style for select field


    .x-selectmark-base,.x-field-select .x-component-outer:after {


    webkit-mask-image: none !important;
    margin-top: -0.5em;


    }


    .x-field-select .x-component-outer:after {


    content: none !important;


    }


    // Applied this user defined class to specify the background color and background image on select field


    .chooseCountrySelectField {
    background: url('../../resources/images/main_menu_arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #faebb0),
    color-stop(100%, #f3ce72));
    }

    Hope it will be helpful to others.

    Thanks
    Gendaful

  3. #2
    Sencha User
    Join Date
    Dec 2012
    Posts
    30
    Answers
    6
    Vote Rating
    2
    gendaful is on a distinguished road

      0  

    Default Able to override the default styling of sencha cls and changed image of select field

    Able to override the default styling of sencha cls and changed image of select field


    I was able to overcome this issue and applied following stylings to override the default styling by sencha and applied custom image on select field as below.


    User Defined CSS >> Applied following styling to override the default sencha style for select field


    .x-selectmark-base,.x-field-select .x-component-outer:after {


    webkit-mask-image: none !important;
    margin-top: -0.5em;


    }


    .x-field-select .x-component-outer:after {


    content: none !important;


    }


    // Applied this user defined class to specify the background color and background image on select field


    .chooseCountrySelectField {
    background: url('../../resources/images/main_menu_arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #faebb0),
    color-stop(100%, #f3ce72));
    }

    Hope it will be helpful to others.

    Thanks
    Gendaful

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi