[FIX] base_import: layout issues

This rev. makes the 'Formatting Options' area responsive.

Closes #34257

Task 2007558

closes odoo/odoo#36159

Signed-off-by: Géry Debongnie (ged) <ged@openerp.com>

3 files changed, 11 insertions, 11 deletions

diff --git a/addons/base_import/static/src/js/import_action.js b/addons/base_import/static/src/js/import_action.js
index 53e3c42cfa1..c75d4dbda7f 100644
--- a/addons/base_import/static/src/js/import_action.js
+++ b/addons/base_import/static/src/js/import_action.js
@@ -205,7 +205,7 @@ var DataImport = AbstractAction.extend({
     },
     setup_encoding_picker: function () {
         this.$('input.oe_import_encoding').select2({
-            width: '160px',
+            width: '50%',
             data: _.map(('utf-8 utf-16 windows-1252 latin1 latin2 big5 gb18030 shift_jis windows-1251 koir8_r').split(/\s+/), _make_option),
             query: dataFilteredQuery,
             initSelection: function ($e, c) {
@@ -221,7 +221,7 @@ var DataImport = AbstractAction.extend({
             {id: ' ', text: _t("Space")}
         ];
         this.$('input.oe_import_separator').select2({
-            width: '160px',
+            width: '50%',
             data: data,
             query: dataFilteredQuery,
             // this is not provided to initSelection so can't use this.data
@@ -237,7 +237,7 @@ var DataImport = AbstractAction.extend({
         ];
         var data_digits = data_decimal.concat([{id: '', text: _t("No Separator")}]);
         this.$('input.oe_import_float_thousand_separator').select2({
-            width: '160px',
+            width: '50%',
             data: data_digits,
             query: dataFilteredQuery,
             initSelection: function ($e, c) {
@@ -245,7 +245,7 @@ var DataImport = AbstractAction.extend({
             }
         });
         this.$('input.oe_import_float_decimal_separator').select2({
-            width: '160px',
+            width: '50%',
             data: data_decimal,
             query: dataFilteredQuery,
             initSelection: function ($e, c) {
@@ -275,7 +275,7 @@ var DataImport = AbstractAction.extend({
             'MMDDYYYY',
         ]).map(_make_option);
         this.$('input.oe_import_date_format').select2({
-            width: '160px',
+            width: '50%',
             data: data,
             query: dataFilteredQuery,
             initSelection: function ($e, c) {
diff --git a/addons/base_import/static/src/scss/base_import.scss b/addons/base_import/static/src/scss/base_import.scss
index 52ab478c70f..5499c5c4553 100644
--- a/addons/base_import/static/src/scss/base_import.scss
+++ b/addons/base_import/static/src/scss/base_import.scss
@@ -50,7 +50,7 @@
             margin: 0;
         }
         label {
-            width: 150px;
+            width: 48%;
             line-height: 32px;
             text-align: right;
         }
diff --git a/addons/base_import/static/src/xml/base_import.xml b/addons/base_import/static/src/xml/base_import.xml
index c8896a9da3a..6d69d6995aa 100644
--- a/addons/base_import/static/src/xml/base_import.xml
+++ b/addons/base_import/static/src/xml/base_import.xml
@@ -10,26 +10,26 @@
                 <div class="oe_import_with_file row">
                     <a href="#" class="oe_import_toggle col-sm-12">
                         Formatting Options…</a>
-                        <div class="row">
-                            <div class="oe_import_toggled oe_import_options js_import_options col-sm">
+                        <div class="row col-sm-12">
+                            <div class="oe_import_toggled oe_import_options js_import_options col-md-6 col-lg-4">
                                 <p t-foreach="widget.opts" t-as="option">
                                     <!-- no @name, avoid submission when file_update called -->
                                     <label t-attf-for="#{option.name}_#{_id}">
                                         <t t-esc="option.label"/></label>
                                     <input t-attf-id="#{option.name}_#{_id}"
                                            t-attf-class="oe_import_#{option.name}"
-                                           style="max-width: 50%;"
+                                           style="width: 50%;"
                                            t-att-value="option.value"/>
                                 </p>
                             </div>
-                            <div t-foreach="[widget.parse_opts_formats, widget.parse_opts_separators]" t-as="options" class="oe_import_toggled oe_import_options col-sm">
+                            <div t-foreach="[widget.parse_opts_formats, widget.parse_opts_separators]" t-as="options" class="oe_import_toggled oe_import_options col-md-6 col-lg-4">
                                 <p t-foreach="options" t-as="option">
                                     <!-- no @name, avoid submission when file_update called -->
                                     <label t-attf-for="#{option.name}_#{_id}">
                                         <t t-esc="option.label"/></label>
                                     <input t-attf-id="#{option.name}_#{_id}"
                                            t-attf-class="oe_import_#{option.name}"
-                                           style="max-width: 50%;"
+                                           style="width: 50%;"
                                            t-att-value="option.value"/>
                                 </p>
                             </div>