CODEWITHSUNDEEP
jqueryhtmlcss
Prashobh
Prashobh

Reputation: 9542

How to override inline css coming from js

<div class="ui-slider-range ui-widget-header" style="left: 16.67824878387769%; width: 70.8825573314802%; "><p>4:00am  9:00pm</p></div>

The entire div is coming through jquery .Unfortunately i dont have the access to js .I need to remove left and width using css ,Is it possible ?

Upvotes: 2

Views: 607

Answers (5)

Spudley
Spudley

Reputation: 168685

I'm wondering why you'd need to override the styles of an internal part of the a jqueryUI widget? What's gone wrong with the widget's layout that you need to override it?

Note: If you're trying to change the actual value of the slider widget, changing the CSS is not the way to do it -- Yes, the other answers given here will cause the element to drop its width and left attributes, but it won't change the widget's slider marker values, and as soon as the user touches the widget again, it'll reappear.

To be clear: What you're trying to do is hack a widget, in a way that simply won't work.

If you want to set the widget to have the slider at zero, you need to do it via Javascript, not CSS. Please see the jQueryUI manual -- http://api.jqueryui.com/slider/

I suspect you need something like this:

 $(".selector").slider( "values", 0, 0 );
 $(".selector").slider( "values", 1, 0 );

where '.selector' is the reference for the main element that contains the slider (not a selector for individual bits of the widget generated by jqueryUI).

I hope that helps.

Upvotes: 3

Adil
Adil

Reputation: 148120

You can use jQuery function css to change the css properties.

$(function(){
     $('.ui-slider-range.ui-widget-header').css('left', '');
     $('.ui-slider-range.ui-widget-header').css('width', '');
});

If you do not have access to js still you can add your script to change the already generated html elements.

Upvotes: 2

Jai
Jai

Reputation: 74738

use this !important:

.yourCssClass{
    height:0px !important;
 }

fiddle: http://jsfiddle.net/TPL3f/

Upvotes: 2

RDK
RDK

Reputation: 4560

If you have access only to css file use !important:

.ui-slider-range, 
.ui-widget-header {
    width: 100px !imporant;
    left: 0 !important;
}

Upvotes: 3

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Or you cand try adding !important at your css declaration. eg. width:100% !important;

Upvotes: 2

Related Questions