CODEWITHSUNDEEP
css
user2434040
user2434040

Reputation: 61

Ignoring the property from a CSS class

Hi I am trying to implement RTL in my website. I have a check box like this in CSS

.labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: -1px;
}

In case of RTL language a class will be added dynamically to the html file and a new style will be added to CSS as below.

.locale-right-to-left .labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: -1px;
}

Now in this case check box should be moved to the left most direction . But its not happening as both the left and right property are added to the check box. Is there any way we can ignore the right:0px and only left:0px can be used in case of RTL languages?

Upvotes: 0

Views: 111

Answers (3)

benestar
benestar

Reputation: 562

If you add a css class dynamically, you can also remove one. So add a class locale-left-to-right as default so then you can write the following:

.locale-left-to-right .labeled-checkbox .checkbox {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: -1px;
}

Upvotes: 0

Zach Lysobey
Zach Lysobey

Reputation: 15724

Use right: auto in your .locale-right-to-left .labeled-checkbox .checkbox styles to override the right rule

https://developer.mozilla.org/en-US/docs/Web/CSS/right

Upvotes: 1

Turnip
Turnip

Reputation: 36652

Add right: auto; to your RTL class 

   .locale-right-to-left .labeled-checkbox .checkbox {
      position: absolute;
      top: 0px;
      left: 0px;
      right: auto; 
      margin-top: -1px;
    }

Upvotes: 4

Related Questions