Results 1 to 2 of 2

Thread: problem with slider and custom css (::after)

  1. #1
    Sencha User
    Join Date
    Oct 2012

    Default problem with slider and custom css (::after)


    we are evaluating the Sencha Touch Framework for an application development in our company but I have some problems with css and custom components. For example I tried to change the background gradient of a slider by applying the following cls to the slider's config:

        content: "";
        position: absolute;
        width: auto;
        height: 0.8em;
        top: 0.7375em;
        left: 0;
        right: 0;
        margin: 0 0.925em;
        background-image: none;
        background-color: #DDD;
        background-image: -webkit-linear-gradient(left, #0000FF 25%, #FF0000 75%);
        border: 0.1em solid rgba(0, 0, 0, 0.1);
        border-bottom: 0;
        -webkit-box-shadow: rgba(255, 255, 255, 0.7) 0 0.1em 0;
        -webkit-border-radius: 0.4em;
        border-radius: 0.4em;
    The picture below shows the result I get:


    I want to replace the grey bar with the gradient bar. The x-slider class is used also, therefore you can see two bars. How can I override or remove the x-slider class (css ::after selector)? For a similar problem, I found a solution in another post ( ), where the styling is done with a render listener. But this is not the solution that I'm looking for. Is there another way using just css or sass?


  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    Is this a Sencha Touch 2 question?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts