CSS transformX and dir rtl
Question
I have a container with boxes which moves left to right within boundaries (like a thumbnail scroll) with transformX on button click. Container starts with transform: translateX(0px);. I am using px values for translateX and my math is bases on that. The problem is when I test dir=rtl website, container is flipped. What would be the easiest way to handle rtl direction as well? I am pretty sure that I even dont want to know dir in javascript.
This a rough presentation, it does not slide or anything, just to clarify.
.wrap { position: absolute; left: 0; top: 0; width: 500px; height: 100px; overflow: hidden; } .container { position: absolute; width: 1450px; transform: translateX(0px); } .box { position: relative; float: left; width: 100px; height: 100px; margin-right: 1px; background: red; }
<html dir="rtl"> <div class="wrap"> <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> <div class="box">11</div> <div class="box">12</div> <div class="box">13</div> <div class="box">14</div> </div> </div>
3 answers
solution1
0 2018-10-24 17:40:35
Use CSS to detect RTL and override the necessary values:
[dir="rtl"] .wrap {
...
}
[dir="rtl"] .container {
...
}
[dir="rtl"] .box {
...
}
Depending on what you want to achieve, you may just end up using negative values of the same pixel sizes for the translateX's. You may also need to override any left or right-focused styles (left, margin-right, float, etc.)
solution2
0 2018-10-24 17:54:33
I think the problem is that you're using float:left , I've modified your css for box to use display:inline-block , see if it is what you're looking for.
.wrap { position: absolute; width: 400px; height: 100px; overflow: hidden; } .container { position: absolute; width: 1450px; transform: translateX(500px); } .box { position: relative; display:inline-block; width: 100px; height: 100px; margin-right: 1px; background: red; }
<html dir="rtl"> <div class="wrap"> <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> <div class="box">11</div> <div class="box">12</div> <div class="box">13</div> <div class="box">14</div> </div> </div>
solution3
0 2018-10-24 18:36:16
You don't need float:left for .box css. Instead, add display:inline-block; , it will start working for both direction.
See the snippet below.
.wrap { position: absolute; left: 0; top: 0; width: 500px; height: 100px; overflow:hidden; } .container { position: absolute; width: 1450px; transform: translateX(0px); } .box { position: relative; width: 100px; height: 100px; margin-right: 1px; background: red; display:inline-block; }
<html dir="rtl"> <div class="wrap"> <div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> <div class="box">11</div> <div class="box">12</div> <div class="box">13</div> <div class="box">14</div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.