Fix rtl mode

thomasloven · Nov 15, 2019 · 5d2842f · 5d2842f
1 parent 4716077
commit 5d2842f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ max_width: <max_width>
 min_width: <min_width>
 flex_grow: <flex_grow>
 justify_content: <justify_content>
-ltr: <ltr>
+rtl: <rtl>
 cards:
     <cards>
 card_options:
@@ -233,7 +233,7 @@ cards:
 
 - `<flex_grow>` (single value or list) and `<justify_content>` (single value) can be used to tweak the CSS flexbox settings of the layout. See [this excellent guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more info.
 
-- `<rtl>` will make the columns display from right to left instead of left to right.
+- `<rtl>` will populate the columns from right to left instead of left to right.
 
 
 ## A few tips

diff --git a/layout-card.js b/layout-card.js
diff --git a/src/main.js b/src/main.js
@@ -91,6 +91,9 @@ class LayoutCard extends LitElement {
       this._config
     );
 
+    if(this._config.rtl)
+      this.columns.reverse();
+
     this.format_columns();
 
     this.requestUpdate();
@@ -150,7 +153,6 @@ class LayoutCard extends LitElement {
     return html`
       <div id="columns"
       class="
-      ${this._config.rtl ? "rtl": " "}
       ${this._isPanel() ? "panel": " "}
       "
       style="
@@ -178,9 +180,6 @@ class LayoutCard extends LitElement {
         justify-content: center;
         margin-top: -8px;
       }
-      #columns.rtl {
-        flex-direction: row-reverse;
-      }
       #columns.panel {
         margin-top: 0;
       }