Restore multilingual button position for textarea (#603)

- restore multilingual button selector position within the textarea - increase padding-right for textarea to not overlap with multilingual button
rainlab · Sep 17, 2020 · d5a2401 · d5a2401
1 parent 1e4f7d7
commit d5a2401
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/assets/css/multilingual.css b/assets/css/multilingual.css
@@ -3,8 +3,9 @@
 .field-multilingual .ml-btn:hover {color:#555}
 .field-multilingual.field-multilingual-text .form-control {padding-right:44px}
 .field-multilingual.field-multilingual-text .ml-btn {right:4px;top:50%;margin-top:-44px;height:88px}
-.field-multilingual.field-multilingual-textarea .ml-btn {right:11px;top:-29px;text-align:right}
-.field-multilingual.field-multilingual-textarea .ml-dropdown-menu {top:1px;right:1px}
+.field-multilingual.field-multilingual-textarea textarea {padding-right:30px}
+.field-multilingual.field-multilingual-textarea .ml-btn {right:13px;top:5px;width:24px;text-align:right;padding-left:4px}
+.field-multilingual.field-multilingual-textarea .ml-dropdown-menu {top:39px;right:1px}
 .field-multilingual.field-multilingual-richeditor .ml-btn {top:43px;right:25px;text-align:right}
 .field-multilingual.field-multilingual-richeditor .ml-dropdown-menu {top:74px;right:12px}
 .field-multilingual.field-multilingual-markdowneditor .ml-btn {top:43px;right:25px;text-align:right}

diff --git a/assets/less/multilingual.less b/assets/less/multilingual.less
@@ -36,14 +36,21 @@
     }
 
     &.field-multilingual-textarea {
+        textarea {
+            // increase padding on the right so that the textarea content does not overlap with the language button
+            padding-right: 30px;
+        }
+
         .ml-btn {
-            right: 11px;
-            top: -29px;
+            right: 13px;
+            top: 5px;
+            width: 24px;
             text-align: right;
+            padding-left: 4px;
         }
 
         .ml-dropdown-menu {
-            top: 1px;
+            top: 39px;
             right: 1px;
         }
     }