I'm overriding the site CSS to an RTL version when specific language is chosen.
I have an element which has to have absolute positioning. In the LTR version, I do left: 0px; and it's aligned to the left; in the RTL version I want to do the opposite with right, but the left property isn't overridden so it still stays to the left.
!important, but that didn't work.left: none, but that didn't work.How can I either set it to none or remove it completely while overriding?
This question is related to
css
css-position
left:auto;
This will default the left back to the browser default.
So if you have your Markup/CSS as:
<div class="myClass"></div>
.myClass
{
position:absolute;
left:0;
}
When setting RTL, you could change to:
<div class="myClass rtl"></div>
.myClass
{
position:absolute;
left:0;
}
.myClass.rtl
{
left:auto;
right:0;
}
left: initial
This will also set left back to the browser default.
But important to know property: initial is not supported in IE.
In the future one would use left: unset; for unsetting the value of left.
As of today 4 nov 2014 unset is only supported in Firefox.
My guess is we'll be able to use it around year 2022 when IE 11 is properly phased out.
Source: Stackoverflow.com