From 48a52afb28ce5dde2a5b5ba4c5ad7f50f461cb79 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 3 Nov 2022 19:45:05 +0300
Subject: [PATCH] [rtl] Fix advanced settings for SSE

---
 .../app/template/ChartSettingsDlg.template    | 102 ++++----
 .../template/ImageSettingsAdvanced.template   |   4 +-
 .../ParagraphSettingsAdvanced.template        |  26 +-
 .../template/PivotSettingsAdvanced.template   |   2 +-
 .../template/ShapeSettingsAdvanced.template   |   4 +-
 .../template/SlicerSettingsAdvanced.template  |   6 +-
 .../resources/less/advanced-settings.less     | 228 ++++++++++++++++++
 7 files changed, 300 insertions(+), 72 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
index 34d49c39e..97b619b78 100644
--- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
@@ -16,37 +16,37 @@
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textChartTitle %></label>
-                    <div id="chart-dlg-combo-chart-title" class="input-group-nr" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-chart-title" class="input-group-nr margin-right"></div>
                 </td>
                 <td class="padding-small" width="50%">
-                    <label class="input-label" style="margin-left: 7px;"><%= scope.textLegendPos %></label>
-                    <div id="chart-dlg-combo-legend-pos" class="input-group-nr" style="margin-left: 7px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLegendPos %></label>
+                    <div id="chart-dlg-combo-legend-pos" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textDataLabels %></label>
-                    <div id="chart-dlg-combo-data-labels" class="input-group-nr" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-data-labels" class="input-group-nr margin-right"></div>
                 </td>
                 <td rowspan="2" class="padding-small" width="50%">
-                    <div id="chart-dlg-check-series" style="margin: 20px 0 9px 7px;"></div>
-                    <div id="chart-dlg-check-category" style="margin: 0 0 9px 7px;"></div>
-                    <div id="chart-dlg-check-value" style="margin: 0 0 5px 7px;"></div>
+                    <div id="chart-dlg-check-series"></div>
+                    <div id="chart-dlg-check-category"></div>
+                    <div id="chart-dlg-check-value"></div>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textSeparator %></label>
-                    <div id="chart-dlg-txt-separator" class="input-row"  style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-txt-separator" class="input-row margin-right"></div>
                 </td>
             </tr>
             <tr>
                 <td width="50%">
                     <label id="chart-dlg-label-lines" class="input-label"><%= scope.textLines %></label>
-                    <div id="chart-dlg-combo-lines" class="input-group-nr padding-small" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-lines" class="input-group-nr padding-small margin-right"></div>
                 </td>
                 <td style="vertical-align: bottom;" width="50%">
-                    <div id="chart-dlg-check-markers" style="margin: 0 0 12px 7px;"></div>
+                    <div id="chart-dlg-check-markers"></div>
                 </td>
             </tr>
         </table>
@@ -66,8 +66,8 @@
                     <div id="chart-dlg-combo-vert-title-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-vert-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-vert-grid-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -76,7 +76,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-mintype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -87,7 +87,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-maxtype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -98,7 +98,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-large" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="chart-dlg-combo-v-crosstype-0"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -125,9 +125,9 @@
                     <div id="chart-dlg-check-v-logscale-0"></div>
                 </td>
                 <td class="padding-large">
-                    <div style="float: right;">
+                    <div class="base">
                         <label class="input-label"><%= scope.textBase %></label>
-                        <div id="chart-dlg-input-base-0" style="display: inline-block;margin-left: 5px;"></div>
+                        <div id="chart-dlg-input-base-0" style="display: inline-block;"></div>
                     </div>
                 </td>
             </tr>
@@ -146,8 +146,8 @@
                     <div id="chart-dlg-combo-v-major-type-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-v-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-v-minor-type-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -167,7 +167,7 @@
                     <div id="chart-dlg-combo-v-label-pos-0" class="input-group-nr"></div>
                 </td>
                 <td>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-0" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto margin-left" id="chart-dlg-btn-v-format-0" style="min-width: 100px;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -187,8 +187,8 @@
                     <div id="chart-dlg-combo-vert-title-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-vert-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-vert-grid-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -197,7 +197,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-mintype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -208,7 +208,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-maxtype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -219,7 +219,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-large" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="chart-dlg-combo-v-crosstype-1"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -246,9 +246,9 @@
                     <div id="chart-dlg-check-v-logscale-1"></div>
                 </td>
                 <td class="padding-large">
-                    <div style="float: right;">
+                    <div class="base">
                         <label class="input-label"><%= scope.textBase %></label>
-                        <div id="chart-dlg-input-base-1" style="display: inline-block;margin-left: 5px;"></div>
+                        <div id="chart-dlg-input-base-1" style="display: inline-block;"></div>
                     </div>
                 </td>
             </tr>
@@ -267,8 +267,8 @@
                     <div id="chart-dlg-combo-v-major-type-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-v-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-v-minor-type-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -288,7 +288,7 @@
                     <div id="chart-dlg-combo-v-label-pos-1" class="input-group-nr" ></div>
                 </td>
                 <td>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-1" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto margin-left" id="chart-dlg-btn-v-format-1" style="min-width: 100px;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -308,8 +308,8 @@
                     <div id="chart-dlg-combo-hor-title-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-hor-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-hor-grid-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -318,7 +318,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small axis-crosses-combo" width="115">
                     <div id="chart-dlg-combo-h-crosstype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -353,8 +353,8 @@
                     <div id="chart-dlg-combo-h-major-type-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-h-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-h-minor-type-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -384,8 +384,8 @@
                     <div id="chart-dlg-combo-h-label-pos-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
-                    <div id="chart-dlg-input-label-dist-0" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLabelDist %></label>
+                    <div id="chart-dlg-input-label-dist-0" class="margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -396,8 +396,8 @@
             <tr>
                 <td width="100%" colspan="2">
                     <div id="chart-dlg-combo-label-int-0" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
-                    <div id="chart-dlg-input-label-int-0" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-0" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
+                    <div id="chart-dlg-input-label-int-0" style="display: inline-block;width: 60px;vertical-align: middle;"></div>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-0" style="min-width:100px; vertical-align: middle;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -417,8 +417,8 @@
                     <div id="chart-dlg-combo-hor-title-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-hor-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-hor-grid-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -427,7 +427,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-h-crosstype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -462,8 +462,8 @@
                     <div id="chart-dlg-combo-h-major-type-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-h-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-h-minor-type-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -493,8 +493,8 @@
                     <div id="chart-dlg-combo-h-label-pos-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
-                    <div id="chart-dlg-input-label-dist-1" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLabelDist %></label>
+                    <div id="chart-dlg-input-label-dist-1" class="margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -506,7 +506,7 @@
                 <td width="100%" colspan="2">
                     <div id="chart-dlg-combo-label-int-1" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
                     <div id="chart-dlg-input-label-int-1" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-1" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-1" style="min-width:100px;vertical-align: middle;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -518,7 +518,7 @@
             <tr>
                 <td class="padding-large">
                     <label class="header"><%= scope.textType %></label>
-                    <div id="spark-dlg-button-type" style="margin-right: 15px;"></div>
+                    <div id="spark-dlg-button-type"></div>
                 </td>
                 <td class="padding-large">
                     <label class="header"><%= scope.textStyle %></label>
@@ -537,7 +537,7 @@
             <tr>
                 <td class="padding-small" width="230">
                     <label class="input-label"><%= scope.textShowEmptyCells %></label>
-                    <div id="spark-dlg-combo-empty" class="input-group-nr" style="margin-right: 10px;"></div>
+                    <div id="spark-dlg-combo-empty" class="input-group-nr"></div>
                 </td>
                 <td></td>
             </tr>
@@ -566,7 +566,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="spark-dlg-combo-mintype"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -577,7 +577,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-large" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="spark-dlg-combo-maxtype"></div>
                 </td>
                 <td class="padding-large" width="90">
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
index 9c5fb1c05..252d13ee3 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
@@ -2,7 +2,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="image-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -10,7 +10,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="image-advanced-checkbox-hor"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
index 397e41ebd..fb2079162 100644
--- a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -8,11 +8,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strIndent %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block;margin-right: 3px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsLeftText %></label>
                 <div id="paragraphadv-spin-indent-left"></div>
             </div><!--
-         --><div class="padding-large" style="display: inline-block;margin-right: 3px;">
+         --><div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsRightText %></label>
                 <div id="paragraphadv-spin-indent-right"></div>
             </div><!--
@@ -21,18 +21,18 @@
                     <label class="input-label"><%= scope.strIndentsSpecial %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-special" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-special" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-special-by" style="display: inline-block;"></div>
                 </div>
             </div>
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSpacing %></label></div>
         <div>
-            <div style="display: inline-block;margin-right: 3px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
                 <div id="paragraphadv-spin-spacing-before"></div>
             </div><!--
-         --><div style="display: inline-block;margin-right: 3px;">
+         --><div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
                 <div id="paragraphadv-spin-spacing-after"></div>
             </div><!--
@@ -41,7 +41,7 @@
                     <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-line-rule" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-line-rule" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-line-height" style="display: inline-block;"></div>
                 </div>
             </div>
@@ -63,7 +63,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-subscript"></div>
                 </td>
             </tr>
@@ -71,7 +71,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-double-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-small-caps"></div>
                 </td>
             </tr>
@@ -79,7 +79,7 @@
                 <td class="padding-large">
                     <div id="paragraphadv-checkbox-superscript"></div>
                 </td>
-                <td class="padding-large" style="padding-left: 40px;">
+                <td class="padding-large padding-left">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -105,11 +105,11 @@
 
         </div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.textTabPosition %></label>
                 <div id="paraadv-spin-tab"></div>
             </div>
-            <div class="padding-large" style=" display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style=" display: inline-block;">
                 <label class="input-label"><%= scope.textAlign %></label>
                 <div id="paraadv-cmb-align"></div>
             </div>
@@ -120,8 +120,8 @@
             </div>
         </div>
         <div>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-add-tab" style="width:108px; display: inline-block;"><%= scope.textSet %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-remove-tab" style="width:108px; display: inline-block;"><%= scope.textRemove %></button>
             <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:108px;display: inline-block;"><%= scope.textRemoveAll %></button>
         </div>
     </div>
diff --git a/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
index f782fa415..53d6b2620 100644
--- a/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
@@ -42,7 +42,7 @@
                     <label id="pivot-adv-label-wrap" class="input-label"></label>
                 </td>
                 <td class="padding-large">
-                    <div id="pivot-adv-spin-wrap" style="float: right; width: 85px;"></div>
+                    <div id="pivot-adv-spin-wrap" style="width: 85px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
index b33dd3e97..81aca2a20 100644
--- a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
@@ -21,7 +21,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="shape-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="shape-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -29,7 +29,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="shape-advanced-checkbox-hor"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
index 93668bc1a..a2b276810 100644
--- a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
@@ -13,11 +13,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSize %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 5px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strWidth %></label>
                 <div id="sliceradv-spin-width"></div>
             </div>
-            <div id="sliceradv-button-ratio" style="display: inline-block; margin-right: 5px;"></div>
+            <div id="sliceradv-button-ratio" class="margin-right" style="display: inline-block;"></div>
             <div class="padding-large" style="display: inline-block;">
                 <label class="input-label"><%= scope.strHeight %></label>
                 <div id="sliceradv-spin-height"></div>
@@ -25,7 +25,7 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strButtons %></label></div>
         <div>
-            <div style="display: inline-block; margin-right: 5px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strColumns %></label>
                 <div id="sliceradv-spin-columns"></div>
             </div>
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index eaa2ab0f4..b646af85a 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -84,4 +84,232 @@
 .preview-canvas-container {
     border: @scaled-one-px-value-ie solid @border-regular-control-ie;
     border: @scaled-one-px-value solid @border-regular-control;
+}
+
+#id-adv-shape-rotate, #id-adv-image-rotate {
+    #shape-advanced-spin-angle, #image-advanced-spin-angle {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .flipped {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+}
+
+#id-chart-settings-dlg-layout {
+    .margin-right {
+        margin-right: 7px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 7px;
+        }
+    }
+
+    .margin-left {
+        margin-left: 7px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 7px;
+        }
+    }
+
+    #chart-dlg-check-series {
+        margin: 20px 0 9px 7px;
+
+        .rtl & {
+            margin: 20px 7px 9px 0;
+        }
+    }
+
+    #chart-dlg-check-category {
+        margin: 0 0 9px 7px;
+
+        .rtl & {
+            margin: 0 7px 9px 0;
+        }
+    }
+
+    #chart-dlg-check-value {
+        margin: 0 0 5px 7px;
+
+        .rtl & {
+            margin: 0 7px 5px 0;
+        }
+    }
+
+    #hart-dlg-check-markers {
+        margin: 0 0 12px 7px;
+
+        .rtl & {
+            margin: 0 7px 12px 0;
+        }
+    }
+}
+
+#id-chart-settings-dlg-vert,
+#id-chart-settings-dlg-vert-sec,
+#id-chart-settings-dlg-hor-sec,
+#id-spark-settings-dlg-axis {
+    .margin-left {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    .padding-right {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+
+    .base, #chart-dlg-btn-h-format-1 {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    #chart-dlg-input-base-0,
+    #chart-dlg-input-base-1,
+    #chart-dlg-btn-h-format-1 {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+}
+
+#id-chart-settings-dlg-hor {
+    .margin-left {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    #chart-dlg-input-label-int-0 {
+        margin-left: 3px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 3px;
+        }
+    }
+
+    #chart-dlg-btn-h-format-0 {
+        margin-left: 5px;
+        float: right;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+            float: left;
+        }
+    }
+
+    .axis-crosses-combo {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+
+#id-spark-settings-dlg-style {
+    #spark-dlg-button-type {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+
+    #spark-dlg-combo-empty {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#id-adv-paragraph-indents {
+    .margin-right {
+        margin-right: 3px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+}
+
+#id-adv-paragraph-font {
+    .padding-left {
+        padding-left: 40px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 40px;
+        }
+    }
+}
+
+#id-adv-paragraph-tabs {
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#id-adv-pivot-layout {
+    #pivot-adv-spin-wrap {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
+#id-adv-slicer-style {
+    .margin-right {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
 }
\ No newline at end of file