PDA

View Full Version : problem with slider and custom css (::after)



mlukas
25 Oct 2012, 12:59 AM
Hi,

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:



.my-slider::after{
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:

39577

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 ( http://www.sencha.com/forum/showthread.php?119017 ), 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?

thanks

mitchellsimoens
27 Oct 2012, 1:14 AM
Is this a Sencha Touch 2 question?