How to Override Left:0 Using CSS or Jquery

how to override left:0 using CSS or Jquery?

The default value for left is auto, so just set it to that and you will "reset" it.

.elem {
  left: auto;
}

Make sure that the above comes after the original CSS file.

Override a 'left' style value using Jquery or Javascript

You should do it like this using jQuery's css() method:

$("#itemEditor").css('left','400px');

jQuery css() gets the value of a computed style property for the first element in
the set of matched elements or set one or more CSS properties for
every matched element.

Hope this helps!

How to cancel out left/right for absolutely positioned element?

To reset the left property use

left: auto;

You can use CSS reference to get initial values of CSS properties. For example here is the reference for the left property: https://developer.mozilla.org/en/docs/Web/CSS/left

How to get in Javascript / jQuery only CSS override properties

Unfortunately you are not using the jQuery css() method how it is intended.

https://api.jquery.com/css/

Get the value of a computed style property for the first element in
the set of matched elements or set one or more CSS properties for
every matched element.

This means, it does not care what the CSS file has applied to this element, it will only look for what you have asked it to look for on the element.

What you will need to do it write a CSS file parser, and then query from that.. But it's another tool/library you will need to implement.

And there are answers for such a tool on StackOverflow : Parsing CSS in JavaScript / jQuery

And / Or : Convert CSS text to JavaScript object

From here you will be given a null|undefined for object properties which do not exist.

How to gracefully override the old css with a new css by jQuery?

I would define the CSS rule as follows:

.class1.class2 { width: 300px !important};

and you could add it either to an embedded style sheet or to an external
style sheet.

You can then use JavaScript to add the new selector .class2 to the element of interest.

The CSS rule with .class1.class2 will have higher selectivity than .class1 and override the width setting.

Using this approach, you don't have to remove class1 from the class attribute and you don't have to worry too much about whether the rule for .class1 is defined before or after .class1.class2.

How to override the css using the JQuery

$(".ui-dialog").css({'position': 'absolute', 'left': '858px'});

Edit: If you want to do this using CSS and are not calculating the left position dynamically, you can give an identifier to the dialog using dialogClass and then use the dialog class and put the same css rules in a stylesheet.

How do I override padding-left that has !important attribute

there is a workaround for this using cssText. so adding to the whole CSS of the link the part you want with important ;

The cssText property sets or returns the contents of a style declaration as a string.

see below :

function myFunction() {  var x = document.querySelectorAll("a.orderLink.csshidepipe");  var i;  for (i = 0; i < x.length; i++) {    x[i].style.color = "#FFC214";    x[i].style.backgroundImage = "none";    x[i].innerHTML = "<i class='fa fa-shopping-cart hidden-xs disabled fa-lg'></i> Order Online";  };  $("a.orderLink").css("cssText","padding-left:250px!important"); };myFunction();

a.orderLink{  font-weight: bold;  color: #028940;  text-decoration: none;  background: url("/~/media/C41A83E95BE94F6E873ED29BB40B90A7.png") left no-repeat;  padding-left: 28px !important;  margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a class="orderLink">I have padding</a>

---

Related Topics