# CSS - Charts - Legend - RTL

**URL:** <https://community.glideapps.com/t/css-charts-legend-rtl/39924>\
**Category:** Ask for Help\
**Created:** [March 21, 2022, 10:22pm UTC](https://community.glideapps.com/t/css-charts-legend-rtl/39924 "2022-03-21T22:22:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 21, 2022, 10:22pm UTC](https://community.glideapps.com/t/css-charts-legend-rtl/39924/1 "2022-03-21T22:22:25Z")

</div>

Hi all (and mainly the CSS-master @ThinhDinh),  
I’m struggling to align the text inside the legend-item class. I’ve tried playing with the legend-title and legend-value, I’ve tried text-align, padding, width and more. Couldn’t find the correct combination. This is the closest I got, which brings both these classes to crash into each other

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e35f887f916cb1742719729d435195aea51482b8.png)

The idea is to have the title on the right and the value on the left. Should be a mirror image of the below (below is the default view, no CSS at all):

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1cd1e8efaf031a8c01864d220f90dfac9dd93196.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 22, 2022, 12:29am UTC](https://community.glideapps.com/t/css-charts-legend-rtl/39924/2 "2022-03-22T00:29:43Z")

</div>

How do you want it to look like? Color and text on the right and number on the left?

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 22, 2022, 5:11am UTC](https://community.glideapps.com/t/css-charts-legend-rtl/39924/3 "2022-03-22T05:11:51Z")

</div>

> [@ThinhDinh](#):
>
> Color and text on the right and number on the left

Exactly  
Thanks my friend

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 28, 2022, 3:59am UTC](https://community.glideapps.com/t/css-charts-legend-rtl/39924/4 "2022-03-28T03:59:17Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/05e479c67ed20ab6e15d0ff01ef0672b6ddb4530.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/e/ae498a7fa8906c165cea8aefd63df00c11491618.png)

Here you go.

```auto
<pre><span><style>

div[id*="screenScrollView"] .legend-item {
direction: rtl;
}

div[id*="screenScrollView"] .legend-title {
padding-right: 5px;
}

div[id*="screenScrollView"] .legend-value {
margin-right: auto;
margin-left: 0;
}

```

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 28, 2022, 12:05pm UTC](https://community.glideapps.com/t/css-charts-legend-rtl/39924/5 "2022-03-28T12:05:12Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> 
> div[id*="screenScrollView"] .legend-item {
> direction: rtl;
> }
> 
> div[id*="screenScrollView"] .legend-title {
> padding-right: 5px;
> }
> 
> div[id*="screenScrollView"] .legend-value {
> margin-right: auto;
> margin-left: 0;
> }
> 
> ```

Wow, that’s amazing. Working perfectly!  
Thank you

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [March 29, 2022, 12:06pm UTC](https://community.glideapps.com/t/css-charts-legend-rtl/39924/6 "2022-03-29T12:06:04Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.