From 4245fd0f3ce6a9e410dfb9d65254f0c773242a54 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 14 Jul 2020 18:46:19 +0000
Subject: [PATCH] Bug 22399: Improve responsive behavior of the basic marc
 editor

This patch makes markup and style changes to the basic MARC editor in
order to improve the page's handling of smaller browser widths. It adds
flexbox styling to elements of the form to help accomplish this.

To test, apply the patch and load a record for editing in the basic MARC
editor.

- Adjust your browser width and confirm that the form adjusts well
  to various widths.
- Test that the markup changes haven't broken the JavaScript-driven
  features in the editor:
  - Clone tags
  - Delete tags
  - Expand and collapse tags
  - Clone subfields
  - Delete subfields
  - Re-order subfields
  - Cataloging plugins:
    - Focus-driven plugins like on tag 000
    - Popup plugins like 008 or authority-linked tags
    - Select2-styled dropdowns (e.g. 942$c Item type).
- Test the add/edit items form to confirm that it is still styled as it
  was before.

Edit: The Select2 plugin JavaScript file now accepts a variable to set
the "width" configuration option. It still defaults to "element."
---
 koha-tmpl/intranet-tmpl/prog/css/addbiblio.css     |  60 ++++--
 .../authorities/blinddetail-biblio-search.tt       | 214 ++++++++++-----------
 .../prog/en/modules/cataloguing/addbiblio.tt       | 134 ++++++-------
 koha-tmpl/intranet-tmpl/prog/js/cataloging.js      |  70 +++----
 koha-tmpl/intranet-tmpl/prog/js/select2.js         |   2 +-
 5 files changed, 258 insertions(+), 222 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
index baf3f2138d..1344360d21 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
@@ -109,8 +109,8 @@ li.subfield_line {
 li.subfield_line label {
     font-size:89%;
     float: left;
-	 padding-right : .4em;
-    width: 16em;
+    padding-right: .4em;
+    width: 10em;
     text-align: left;
     clear:left;
 }
@@ -151,12 +151,30 @@ a.tagnum {
 }
 
 .subfieldcode {
-	display: block;
-	float: left;
+    display: block;
+    float: left;
 }
 
 .labelsubfield {
-	float:left;
+    float: left;
+}
+
+#cat_addbiblio .subfieldcode {
+    float: none;
+}
+
+#cat_addbiblio .labelsubfield {
+    font-size: 90%;
+    float: none;
+}
+
+#cat_addbiblio .subfield {
+    float: none;
+    padding: .25em .5em;
+}
+
+#cat_addbiblio .subfield label {
+    color: #00698a;
 }
 
 .input_marceditor {
@@ -164,6 +182,24 @@ a.tagnum {
 	width:30em;
 }
 
+#cat_addbiblio .input_marceditor {
+    float: none;
+    width: 100%;
+}
+
+#cat_addbiblio .subfield_line {
+    display: flex;
+}
+
+#cat_addbiblio .field_marceditor {
+    flex-grow: 1;
+    padding: .25em .5em;
+}
+
+#cat_addbiblio .subfield_loop_mandatory {
+    padding: .25em .5em;
+}
+
 .indicator {
     width: 1em;
     box-sizing: content-box;
@@ -177,12 +213,13 @@ a.tagnum {
 #cataloguing_additem_newitem fieldset.rows li {
 	padding-bottom : 3px;
 }
+
 #cataloguing_additem_newitem .input_marceditor {
-	width : auto;
+    width: auto;
 }
 
 #cataloguing_additem_newitem textarea.input_marceditor {
-     width : 31em;
+    width: 31em;
 }
 
 .mandatory_marker {
@@ -193,18 +230,11 @@ a.tagnum {
 .linktools a {margin:0 2px;padding:2px;background-color:#FFF;text-align:center; }
 .linktools a:first-child { border-bottom: 1px solid #DDD; }
 .linktools a:hover { background-color: #FFC; }
-.subfield_controls { margin : 0 .5em; }
+.subfield_controls { margin: 0 .5em; }
 
 #cataloguing_additem_itemlist {
 	margin-bottom : 1em;
 }
-.yui-gf div.first {
-	width : 19%;
-}
-
-.yui-gf .yui-u {
-	width: 79.2%;
-}
 
 tbody tr.active:nth-child(2n+1) td,
 tbody tr.active td {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt
index 083eda7c18..16360262f5 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/blinddetail-biblio-search.tt
@@ -20,129 +20,129 @@
     <script>
         $(document).ready(function(){
             [% IF rancor %]
-            function RancorReplaceField( new_text, ind_1, ind_2 ){
-                var cur_field = opener.opener.jQuery(".CodeMirror")[0].CodeMirror.marceditor.getCurrentField();
-                cur_field.setText(new_text);
-                [% IF update_ind1 %]cur_field.setIndicator1(ind_1);[% END %]
-                [% IF update_ind2 %]cur_field.setIndicator2(ind_2);[% END %]
-                return true;
-            }
+                function RancorReplaceField( new_text, ind_1, ind_2 ){
+                    var cur_field = opener.opener.jQuery(".CodeMirror")[0].CodeMirror.marceditor.getCurrentField();
+                    cur_field.setText(new_text);
+                    [% IF update_ind1 %]cur_field.setIndicator1(ind_1);[% END %]
+                    [% IF update_ind2 %]cur_field.setIndicator2(ind_2);[% END %]
+                    return true;
+                }
                 [% IF ( clear ) %]
-                var new_line = "";
+                    var new_line = "";
                 [% ELSE %]
-                var new_line = "
-                [%- FOREACH SUBFIELD_LOO IN SUBFIELD_LOOP -%]‡
-                    [%- To.json( SUBFIELD_LOO.marc_subfield ) | $raw -%]
-                    [%- FOREACH marc_value IN SUBFIELD_LOO.marc_values -%]
-                        [%- To.json( marc_value ) | $raw -%]
-                    [%- END -%]
-                [%- END -%]‡9[% authid | html %]";
+                    var new_line = "
+                    [%- FOREACH SUBFIELD_LOO IN SUBFIELD_LOOP -%]‡
+                        [%- To.json( SUBFIELD_LOO.marc_subfield ) | $raw -%]
+                        [%- FOREACH marc_value IN SUBFIELD_LOO.marc_values -%]
+                            [%- To.json( marc_value ) | $raw -%]
+                        [%- END -%]
+                    [%- END -%]‡9[% authid | html %]";
                 [% END %]
                 RancorReplaceField( new_line, "[% indicator1 | html %]", "[% indicator2 | html %]" );
             [% ELSE %]
-            var index_start = "[% index | html %]";
-            var whichfield;
-            try {
-                whichfield = opener.opener.document.getElementById(index_start);
-            } catch(e) {
-                return;
-            }
-            var field_start = whichfield.parentNode.parentNode.parentNode;
-
-            // Sets the good number of form fields for the specified subfield
-            // Returns false if the cloning failed
-            function SetSubfieldNumber(subfield_name, nb) {
-                // Nothing to do if we only have one value
-                if(nb <= 1) {
-                    return true;
+                var index_start = "[% index | html %]";
+                var whichfield;
+                try {
+                    whichfield = opener.opener.document.getElementById(index_start);
+                } catch(e) {
+                    return;
                 }
+                var field_start = whichfield.parentNode.parentNode.parentNode.parentNode;
+
+                // Sets the good number of form fields for the specified subfield
+                // Returns false if the cloning failed
+                function SetSubfieldNumber(subfield_name, nb) {
+                    // Nothing to do if we only have one value
+                    if(nb <= 1) {
+                        return true;
+                    }
 
-                // Find the subfield we want to clone
-                var re = new RegExp('^subfield' + subfield_name,'g');
-                var subfields = $(field_start).children('ul').children('li').filter( function() {
-                    return this.id.match(re);
-                });
-
-                // Try to add as many clones as needed
-                try {
-                    for(var i=0; i<nb-subfields.length; i++) {
-                        window.opener.opener.CloneSubfield(subfields[0].getAttribute('id'),'[% advancedMARCEditor | html %]');
+                    // Find the subfield we want to clone
+                    var re = new RegExp('^subfield' + subfield_name,'g');
+                    var subfields = $(field_start).children('ul').children('li').filter( function() {
+                        return this.id.match(re);
+                    });
+
+                    // Try to add as many clones as needed
+                    try {
+                        for(var i=0; i<nb-subfields.length; i++) {
+                            window.opener.opener.CloneSubfield(subfields[0].getAttribute('id'),'[% advancedMARCEditor | html %]');
+                        }
                     }
-                }
-                catch(err) {
-                    return false;
-                }
-                return true;
-            }
-
-            // Fills the subfield with the values entered in argument
-            function SetSubfieldValues() {
-                // Get the arguments
-                var subfield_name = arguments[0];
-                var values = new Array();
-                for(var i=1; i<arguments.length; i++) {
-                    values.push(arguments[i]);
+                    catch(err) {
+                        return false;
+                    }
+                    return true;
                 }
 
-                // Create the correct number of form fields for all values
-                // If the field cloning failed, only the first value will be added to the form.
-                SetSubfieldNumber(subfield_name, values.length);
-
-                // Find the subfields where we will add the new values
-                var re = new RegExp('^subfield' + subfield_name,'g');
-                var subfields = $(field_start).children('ul').children('li').filter( function() {
-                    return this.id.match(re);
-                });
-
-                // Add the new values to those subfields, empty the additional fields
-                var i=0;
-                subfields.each(function() {
-                    if(i in values) {
-                        this.getElementsByTagName('input')[1].value = values[i];
-                    }
-                    else {
-                        this.getElementsByTagName('input')[1].value = "";
+                // Fills the subfield with the values entered in argument
+                function SetSubfieldValues() {
+                    // Get the arguments
+                    var subfield_name = arguments[0];
+                    var values = new Array();
+                    for(var i=1; i<arguments.length; i++) {
+                        values.push(arguments[i]);
                     }
-                    i++;
-                });
-            }
-            [% UNLESS ( clear ) %]
-                [% FOREACH SUBFIELD_LOO IN SUBFIELD_LOOP %]
-                    SetSubfieldValues(
-                        "[% To.json(tag_number) | $raw %][% To.json(SUBFIELD_LOO.marc_subfield) | $raw %]"
-                    [% FOREACH marc_value IN SUBFIELD_LOO.marc_values %]
-                        ,"[% To.json( marc_value ) | $raw %]"
+
+                    // Create the correct number of form fields for all values
+                    // If the field cloning failed, only the first value will be added to the form.
+                    SetSubfieldNumber(subfield_name, values.length);
+
+                    // Find the subfields where we will add the new values
+                    var re = new RegExp('^subfield' + subfield_name,'g');
+                    var subfields = $(field_start).children('ul').children('li').filter( function() {
+                        return this.id.match(re);
+                    });
+
+                    // Add the new values to those subfields, empty the additional fields
+                    var i=0;
+                    subfields.each(function() {
+                        if(i in values) {
+                            this.getElementsByTagName('input')[1].value = values[i];
+                        }
+                        else {
+                            this.getElementsByTagName('input')[1].value = "";
+                        }
+                        i++;
+                    });
+                }
+                [% UNLESS ( clear ) %]
+                    [% FOREACH SUBFIELD_LOO IN SUBFIELD_LOOP %]
+                        SetSubfieldValues(
+                            "[% To.json(tag_number) | $raw %][% To.json(SUBFIELD_LOO.marc_subfield) | $raw %]"
+                        [% FOREACH marc_value IN SUBFIELD_LOO.marc_values %]
+                            ,"[% To.json( marc_value ) | $raw %]"
+                        [% END %]
+                        );
+                    [% END %]
+                    var indicators = field_start.getElementsByClassName('indicator flat');
+                    [% IF update_ind1 %]
+                        indicators[0].value="[% indicator1 | html %]";
+                    [% END %]
+                    [% IF update_ind2 %]
+                        indicators[1].value="[% indicator2 | html %]";
                     [% END %]
-                    );
-                [% END %]
-                var indicators = field_start.getElementsByClassName('indicator flat');
-                [% IF update_ind1 %]
-                    indicators[0].value="[% indicator1 | html %]";
-                [% END %]
-                [% IF update_ind2 %]
-                    indicators[1].value="[% indicator2 | html %]";
                 [% END %]
-            [% END %]
-
-            // browse all its subfields (clear and $9)
-            var subfields = field_start.getElementsByTagName('input');
-            var re = /^tag_\d*_code_/;
-            for(var i=0, len = subfields.length ; i< len ; i++) { // browse all subfields
-                if(subfields[i].hasAttribute('name') == 0 ) {continue; }  // div elements specific to Select2
-                if(subfields[i].getAttribute('name').match(re)){ // it s a subfield
-                    var code     = subfields[i];   // code is the first input
-                    var subfield = subfields[i+1]; // subfield the second
 
-                [% IF ( clear ) %]
-                    if (subfield){subfield.value="" ;}
-                [% ELSE %]
-                    if(code.value=='9'){
-                        subfield.value = "[% To.json(authid) | $raw %]";
-                        break;
+                // browse all its subfields (clear and $9)
+                var subfields = field_start.getElementsByTagName('input');
+                var re = /^tag_\d*_code_/;
+                for(var i=0, len = subfields.length ; i< len ; i++) { // browse all subfields
+                    if(subfields[i].hasAttribute('name') == 0 ) {continue; }  // div elements specific to Select2
+                    if(subfields[i].getAttribute('name').match(re)){ // it s a subfield
+                        var code     = subfields[i];   // code is the first input
+                        var subfield = subfields[i+1]; // subfield the second
+
+                    [% IF ( clear ) %]
+                        if (subfield){subfield.value="" ;}
+                    [% ELSE %]
+                        if(code.value=='9'){
+                            subfield.value = "[% To.json(authid) | $raw %]";
+                            break;
+                        }
+                    [% END %]
                     }
-                [% END %]
                 }
-            }
             [% END %]
 
             opener.close();
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
index 8a165721f7..38b3ab8ca8 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
@@ -7,6 +7,7 @@
 [% Asset.js("lib/hc-sticky.js") | $raw %]
 <script>
     var CAN_user_parameters_manage_auth_values = "[% CAN_user_parameters_manage_auth_values | html %]";
+    var select2Width = "100%";
 </script>
 [% INCLUDE 'select2.inc' %]
 [% Asset.js("js/cataloging.js") | $raw %]
@@ -484,7 +485,6 @@
 
 </script>
 [% Asset.css("css/addbiblio.css") | $raw %]
-
 </head>
 <body id="cat_addbiblio" class="cat">
 
@@ -789,89 +789,93 @@
                                         [% FOREACH subfield_loo IN innerloo.subfield_loop %]
                                             <!--  One line on the marc editor -->
                                             <li class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
+                                                <div class="subfieldcode">
+                                                    <input type="text"
+                                                            title="[% subfield_loo.marc_lib | $raw %]"
+                                                            style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"
+                                                            name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]"
+                                                            value="[% subfield_loo.subfield | html %]"
+                                                            size="1"
+                                                            maxlength="1"
+                                                            class="flat"
+                                                            tabindex="0" />
+                                                </div>
                                                 [% UNLESS advancedMARCEditor %]
-                                                    [% IF ( subfield_loo.fixedfield ) %]
-                                                        <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
+                                                    [% IF ( subfield_loo.mandatory ) %]
+                                                        <div class="subfield subfield_mandatory">
+                                                    [% ELSIF ( subfield_loo.important ) %]
+                                                        <div class="subfield subfield_important">
                                                     [% ELSE %]
-                                                        <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
+                                                        <div class="subfield">
                                                     [% END %]
-                                                [% END %]
-
-                                                    <span class="subfieldcode">
-                                                            <input type="text"
-                                                                title="[% subfield_loo.marc_lib | $raw %]"
-                                                                style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"
-                                                                name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]"
-                                                                value="[% subfield_loo.subfield | html %]"
-                                                                size="1"
-                                                                maxlength="1"
-                                                                class="flat"
-                                                                tabindex="0" />
-                                                    </span>
-
-                                                [% UNLESS advancedMARCEditor %]
-                                                        [% IF ( subfield_loo.mandatory ) %]
-                                                            <span class="subfield subfield_mandatory">
-                                                        [% ELSIF ( subfield_loo.important ) %]
-                                                            <span class="subfield subfield_important">
+                                                        [% IF ( subfield_loo.fixedfield ) %]
+                                                            <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
                                                         [% ELSE %]
-                                                            <span class="subfield">
+                                                            <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
                                                         [% END %]
                                                         [% subfield_loo.marc_lib | $raw %]
-                                                        </span>
-                                                    </label>
+                                                        </label>
+                                                    </div>
                                                 [% END %]
 
                                                 [% SET mv = subfield_loo.marc_value %]
-                                                [% IF ( mv.type == 'text' ) %]
-                                                    [% IF ( mv.readonly == 1 ) %]
-                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
-                                                    [% ELSE %]
-                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
-                                                    [% END %]
-
-                                                    [% IF ( mv.authtype ) %]
-                                                        <span class="subfield_controls"><a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a></span>
-                                                    [% END %]
-                                                [% ELSIF ( mv.type == 'text_complex' ) %]
-                                                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
-                                                    <span class="subfield_controls">
-                                                        [% IF mv.noclick %]
-                                                            <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span>
+                                                <div id="field_marceditor[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]" class="field_marceditor">
+                                                    [% IF ( mv.type == 'text' ) %]
+                                                        [% IF ( mv.readonly == 1 ) %]
+                                                            <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
                                                         [% ELSE %]
-                                                            [% IF mv.plugin == "upload.pl" %]
-                                                                <a href="#" id="buttonDot_[% mv.id | html %]" class="tag_editor upload framework_plugin" tabindex="1"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
-                                                            [% ELSE %]
-                                                                <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a>
-                                                            [% END %]
+                                                            <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
                                                         [% END %]
-                                                    </span>
-                                                    [% mv.javascript | $raw %]
-                                                [% ELSIF ( mv.type == 'hidden' ) %]
-                                                    <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
-                                                [% ELSIF ( mv.type == 'textarea' ) %]
-                                                    <textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
-                                                [% ELSIF ( mv.type == 'select' ) %]
+
+                                                    [% ELSIF ( mv.type == 'text_complex' ) %]
+                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
+                                                        [% mv.javascript | $raw %]
+                                                    [% ELSIF ( mv.type == 'hidden' ) %]
+                                                        <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
+                                                    [% ELSIF ( mv.type == 'textarea' ) %]
+                                                        <textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
+                                                    [% ELSIF ( mv.type == 'select' ) %]
                                                     [% IF mv.category AND CAN_user_parameters_manage_auth_values %]
                                                         <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor" id="[%- mv.id | html -%]" data-category="[% mv.category | html %]">
                                                     [% ELSE %]
                                                         <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor select2" id="[%- mv.id | html -%]">
                                                     [% END %]
-                                                    [% FOREACH aval IN mv.values %]
-                                                        [% IF aval == mv.default %]
-                                                        <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option>
-                                                        [% ELSE %]
-                                                        <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option>
+                                                        [% FOREACH aval IN mv.values %]
+                                                            [% IF aval == mv.default %]
+                                                            <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option>
+                                                            [% ELSE %]
+                                                            <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option>
+                                                            [% END %]
                                                         [% END %]
-                                                    [% END %]
-                                                    </select>
-                                                [% END  # /IF (mv.type...) %]
+                                                        </select>
+                                                    [% END  # /IF (mv.type...) %]
+                                                </div>
                                                 [% IF ( subfield_loo.mandatory ) %]
-                                                    <span class="required">Required</span>
+                                                    <div class="subfield_loop_mandatory">
+                                                        <span class="required">Required</span>
+                                                    </div>
                                                 [% ELSIF ( subfield_loo.important ) %]
-                                                    <span class="important">Important</span>
+                                                    <div class="subfield_loop_mandatory">
+                                                        <span class="important">Important</span>
+                                                    </div>
                                                 [% END %]
-                                                <span class="subfield_controls">
+                                                <div class="subfield_controls">
+                                                    [% IF ( mv.type == 'text' ) %]
+                                                        [% IF ( mv.authtype ) %]
+                                                            <a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a>
+                                                        [% END %]
+                                                    [% ELSIF ( mv.type == 'text_complex' ) %]
+                                                            [% IF mv.noclick %]
+                                                                <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span>
+                                                            [% ELSE %]
+                                                                [% IF mv.plugin == "upload.pl" %]
+                                                                    <a href="#" id="buttonDot_[% mv.id | html %]" class="tag_editor upload framework_plugin" tabindex="1"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
+                                                                [% ELSE %]
+                                                                    <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a>
+                                                                [% END %]
+                                                            [% END %]
+                                                        </span>
+                                                    [% END %]
                                                     [% IF ( subfield_loo.repeatable ) %]
                                                         <a href="#" class="buttonPlus" tabindex="1" onclick="CloneSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]','[% advancedMARCEditor | html %]'); return false;">
                                                             <img src="[% interface | html %]/[% theme | html %]/img/clone-subfield.png" alt="Clone" title="Clone this subfield" />
@@ -880,7 +884,7 @@
                                                             <img src="[% interface | html %]/[% theme | html %]/img/delete-subfield.png" alt="Delete" title="Delete this subfield" />
                                                         </a>
                                                     [% END %]
-                                                </span>
+                                                </div>
                                             </li> <!-- /.subfield_line -->
                                             <!-- End of the line -->
                                         [% END # /FOREACH subfield_loop %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
index 417a78ec6d..6cfccd2539 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
@@ -65,10 +65,10 @@ function ExpandField(index) {
         if(lis[i].getAttribute('id').match(/^subfield/)){  // if it s a subfield
             if (!lis[i].style.display) {
                 // first time => show all subfields
-                lis[i].style.display = 'block';
+                lis[i].style.display = 'flex';
             } else if (lis[i].style.display == 'none') {
                 // show
-                lis[i].style.display = 'block';
+                lis[i].style.display = 'flex';
             } else {
                 // hide
                 lis[i].style.display = 'none';
@@ -174,7 +174,7 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
     // settings all subfields
     var divslen = divs.length;
     for( i=0; i < divslen ; i++ ){      // foreach div/li
-        if(divs[i].getAttribute("id").match(/^subfield/)){  // if it s a subfield
+        if( divs[i].getAttribute("id") && divs[i].getAttribute("id").match(/^subfield/)){  // if it s a subfield
 
             // set the attribute for the new 'li' subfields
             divs[i].setAttribute('id',divs[i].getAttribute('id')+new_key);
@@ -195,38 +195,38 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
                     textareas[j].value = "";
                 }
             }
+            if( inputs.length > 0 ){
+                inputs[0].setAttribute('id',inputs[0].getAttribute('id')+new_key);
+                inputs[0].setAttribute('name',inputs[0].getAttribute('name')+new_key);
 
-            inputs[0].setAttribute('id',inputs[0].getAttribute('id')+new_key);
-            inputs[0].setAttribute('name',inputs[0].getAttribute('name')+new_key);
-
-            try {
-                id_input = inputs[1].getAttribute('id')+new_key;
-                inputs[1].setAttribute('id',id_input);
-                inputs[1].setAttribute('name',inputs[1].getAttribute('name')+new_key);
-            } catch(e) {
-                try{ // it s a select if it is not an input
-                    var selects = divs[i].getElementsByTagName('select');
-                    id_input = selects[0].getAttribute('id')+new_key;
-                    selects[0].setAttribute('id',id_input);
-                    selects[0].setAttribute('name',selects[0].getAttribute('name')+new_key);
-                }catch(e2){ // it is a textarea if it s not a select or an input
-                    var textaeras = divs[i].getElementsByTagName('textarea');
-                    id_input = textaeras[0].getAttribute('id')+new_key;
-                    textaeras[0].setAttribute('id',id_input);
-                    textaeras[0].setAttribute('name',textaeras[0].getAttribute('name')+new_key);
+                try {
+                    id_input = inputs[1].getAttribute('id')+new_key;
+                    inputs[1].setAttribute('id',id_input);
+                    inputs[1].setAttribute('name',inputs[1].getAttribute('name')+new_key);
+                } catch(e) {
+                    try{ // it s a select if it is not an input
+                        var selects = divs[i].getElementsByTagName('select');
+                        id_input = selects[0].getAttribute('id')+new_key;
+                        selects[0].setAttribute('id',id_input);
+                        selects[0].setAttribute('name',selects[0].getAttribute('name')+new_key);
+                    }catch(e2){ // it is a textarea if it s not a select or an input
+                        var textareas = divs[i].getElementsByTagName('textarea');
+                        if( textareas.length > 0 ){
+                            id_input = textareas[0].getAttribute('id')+new_key;
+                            textareas[0].setAttribute('id',id_input);
+                            textareas[0].setAttribute('name',textareas[0].getAttribute('name')+new_key);
+                        }
+                    }
+                }
+                if( $(inputs[1]).hasClass('framework_plugin') ) {
+                    olddiv= original.getElementsByTagName('li')[i];
+                    oldcontrol= olddiv.getElementsByTagName('input')[1];
+                    AddEventHandlers( oldcontrol,inputs[1],id_input );
                 }
             }
-            if( $(inputs[1]).hasClass('framework_plugin') ) {
-                olddiv= original.getElementsByTagName('li')[i];
-                oldcontrol= olddiv.getElementsByTagName('input')[1];
-                AddEventHandlers( oldcontrol,inputs[1],id_input );
-            }
-
-            if (advancedMARCEditor == '0') {
-                // when cloning a subfield, re set its label too.
-                var labels = divs[i].getElementsByTagName('label');
-                labels[0].setAttribute('for',id_input);
-            }
+            // when cloning a subfield, re set its label too.
+            var labels = divs[i].getElementsByTagName('label');
+            labels[0].setAttribute('for', id_input);
 
             // setting its '+' and '-' buttons
             try {
@@ -277,7 +277,7 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
             }
 
         } else { // it's a indicator div
-            if(divs[i].getAttribute('id').match(/^div_indicator/)){
+            if ( divs[i].getAttribute("id") && divs[i].getAttribute('id').match(/^div_indicator/)) {
 
                 // setting a new id for the indicator div
                 divs[i].setAttribute('id',divs[i].getAttribute('id')+new_key);
@@ -381,7 +381,9 @@ function CloneSubfield(index, advancedMARCEditor){
     if(advancedMARCEditor == '0') {
         // when cloning a subfield, reset its label too.
         var label = clone.getElementsByTagName('label')[0];
-        label.setAttribute('for',id_input);
+        if( label ){
+            label.setAttribute('for',id_input);
+        }
     }
 
     // setting a new id for the parent div
diff --git a/koha-tmpl/intranet-tmpl/prog/js/select2.js b/koha-tmpl/intranet-tmpl/prog/js/select2.js
index 5ae8085c03..a5c07fe12a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/select2.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/select2.js
@@ -1,7 +1,7 @@
 /* global __ */
 $.fn.select2.defaults.set("allowClear", true);
 $.fn.select2.defaults.set("placeholder", "");
-$.fn.select2.defaults.set("width", "element");
+$.fn.select2.defaults.set("width", select2Width || "element" );
 
 // Internationalization
 $.fn.select2.defaults.set("language", {
-- 
2.11.0