UBO-372 - add css for bootstrap-select

- fix poper bug by adding data-display="static" - add layout configuration for bootstrap-select
MyCoRe-Org · Dec 12, 2024 · 2d3e21f · 2d3e21f
1 parent 1a81312
commit 2d3e21f
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 29 deletions.
diff --git a/ubo-common/src/main/resources/META-INF/resources/import-editor.xed b/ubo-common/src/main/resources/META-INF/resources/import-editor.xed
@@ -22,9 +22,17 @@
     <script type="text/javascript">
       <![CDATA[
       $(document).ready(function() {
-      
-        $('select[class*="autocomplete"]').selectpicker({liveSearch:true, liveSearchNormalize:true, virtualScroll:true, showSubtext:true, size:10}); 
-      
+
+        $('select[class*="autocomplete"]').selectpicker({
+          liveSearch:true,
+          liveSearchNormalize:true,
+          virtualScroll:true,
+          showSubtext:true,
+          size:10,
+          width:'auto',
+          dropupAuto: false
+        });
+
         $(document).popover({
           selector: "[data-toggle=popover]",
           container: "body",
@@ -121,7 +129,7 @@
         <label for="{xed:generate-id()}" class="mycore-form-label ubo-mandatory">
           <xed:output value="concat(i18n:translate('ubo.subject'), ': ')" />
         </label>
-        <select id="{xed:generate-id()}" class="autocomplete mycore-form-input">
+        <select id="{xed:generate-id()}" class="autocomplete mycore-form-input" data-container="form-group" data-display="static">
           <option value="">
             <xed:output i18n="search.select.autocomplete" />
           </option>
@@ -135,20 +143,20 @@
   <xed:template id="origin">
     <xed:repeat xpath="mods:classification[@classID='ORIGIN']" max="10">
       <div class="form-inline form-group ubo-repeat-group">
-      <xed:choose>
-        <xed:when test="$genre_intern = 'dissertation'">
-          <label class="mycore-form-label ubo-mandatory" for="{xed:generate-id()}">
-            <xed:validate xpath="//mods:classification[@classID='ORIGIN']" required="true" i18n="condition.institution" display="global" />
-            <xed:output value="concat(i18n:translate('ubo.department'), ': ')" />
-          </label>
-        </xed:when>
-        <xed:otherwise>
-          <label class="mycore-form-label" for="{xed:generate-id()}">
-            <xed:output value="concat(i18n:translate('ubo.department'), ': ')" />
-          </label>
-        </xed:otherwise>
-      </xed:choose>
-        <select id="{xed:generate-id()}" class="autocomplete {$xed-validation-marker} mycore-form-input">
+        <xed:choose>
+          <xed:when test="$genre_intern = 'dissertation'">
+            <label class="mycore-form-label ubo-mandatory" for="{xed:generate-id()}">
+              <xed:validate xpath="//mods:classification[@classID='ORIGIN']" required="true" i18n="condition.institution" display="global" />
+              <xed:output value="concat(i18n:translate('ubo.department'), ': ')" />
+            </label>
+          </xed:when>
+          <xed:otherwise>
+            <label class="mycore-form-label" for="{xed:generate-id()}">
+              <xed:output value="concat(i18n:translate('ubo.department'), ': ')" />
+            </label>
+          </xed:otherwise>
+        </xed:choose>
+        <select id="{xed:generate-id()}" class="autocomplete {$xed-validation-marker} mycore-form-input" data-container="form-group" data-display="static">
           <option value=""><xed:output i18n="search.select.autocomplete" /></option>
           <xed:include uri="xslStyle:mycoreclass-options:classification:metadata:-1:children:ORIGIN" />
         </select>

diff --git a/ubo-common/src/main/resources/META-INF/resources/import-from-evaluna.xed b/ubo-common/src/main/resources/META-INF/resources/import-from-evaluna.xed
@@ -37,15 +37,26 @@
             <div>
               <label for="{xed:generate-id()}">Institut / Klinik:</label>
               <span class="{$xed-validation-marker}">
-                <select id="{xed:generate-id()}" style="width:400px;" class="autocomplete {$xed-validation-marker}">
+                <select id="{xed:generate-id()}" style="width:400px;" class="autocomplete {$xed-validation-marker}" data-display="static">
                   <option value=""><xed:output i18n="search.select" /></option>
                   <xed:include uri="xslStyle:mycoreclass-options:classification:metadata:-1:children:ORIGIN:14" />
                 </select>
               </span>
             </div>
           </xed:bind>
           <script type="text/javascript">
-            jQuery(document).ready(function() { jQuery('select[class*="autocomplete"]').selectpicker({liveSearch:true, liveSearchNormalize:true, virtualScroll:true, showSubtext:true, size:10}); });
+            jQuery(document).ready(function() {
+              jQuery('select[class*="autocomplete"]').selectpicker({
+              liveSearch:true, liveSearchNormalize:true, virtualScroll:true, showSubtext:true, size:10
+                liveSearch:true,
+                liveSearchNormalize:true,
+                virtualScroll:true,
+                showSubtext:true,
+                size:10,
+                width:'auto',
+                dropupAuto: false
+              });
+            });
           </script>
 
         </fieldset>

diff --git a/ubo-common/src/main/resources/META-INF/resources/import-list.xed b/ubo-common/src/main/resources/META-INF/resources/import-list.xed
@@ -73,7 +73,11 @@
                 <label for="{generate-id()}" class="mycore-form-label text-nowrap">
                   <xed:output i18n="search.dozbib.status" />:
                 </label>
+<<<<<<< Upstream, based on d012ad70a15c87b15a15cc412bef21baf4878dbf
                 <select id="{generate-id()}" class="{$xed-validation-marker}  mycore-form-input form-control custom-select">
+=======
+                <select id="{generate-id()}" class="{$xed-validation-marker} mycore-form-input form-control custom-select">
+>>>>>>> 23de200 UBO-372 - add css for bootstrap-select
                   <option value="">
                     <xed:output i18n="search.select"/>
                   </option>
@@ -93,7 +97,11 @@
                   <option value="">
                     <xed:output i18n="search.select" />
                   </option>
+<<<<<<< Upstream, based on d012ad70a15c87b15a15cc412bef21baf4878dbf
                   <xed:include uri="xslStyle:mycoreclass-options?omitSubtext={$UBO.Editor.import-list.omitSubtext}:classification:metadata:-1:children:fachreferate" />
+=======
+                  <xed:include uri="xslStyle:mycoreclass-options:classification:metadata:-1:children:fachreferate" />
+>>>>>>> 23de200 UBO-372 - add css for bootstrap-select
                 </select>
                 <xed:controls />
               </div>

diff --git a/ubo-common/src/main/resources/META-INF/resources/js/ImportList.js b/ubo-common/src/main/resources/META-INF/resources/js/ImportList.js
@@ -1,5 +1,14 @@
 $(document).ready(function () {
-    $('select[class*="autocomplete"]').selectpicker({liveSearch:true, liveSearchNormalize:true, virtualScroll:true, showSubtext:true, size:10});
+    $('select[class*="autocomplete"]').selectpicker({
+      liveSearch:true,
+      liveSearchNormalize:true,
+      virtualScroll:true,
+      showSubtext:true,
+      size:10,
+      width:'auto',
+      dropupAuto: false
+    });
+
 });
 
 const UBOImportList = {

diff --git a/ubo-common/src/main/resources/META-INF/resources/scss/_ubo-common.scss b/ubo-common/src/main/resources/META-INF/resources/scss/_ubo-common.scss
@@ -150,6 +150,12 @@
     padding-left: 5px;
   }
 
+  .bootstrap-select {
+    .dropdown-menu {
+      width: 100%;
+    }
+  }
+
 // Large devices (desktops) and below: <= 1200px
 @include media-breakpoint-down(lg) {
 // add/overwrite styles for responsive level lg and lower

diff --git a/ubo-common/src/main/resources/META-INF/resources/search-mdiss.xed b/ubo-common/src/main/resources/META-INF/resources/search-mdiss.xed
@@ -41,30 +41,42 @@
             <xed:bind xpath="conditions[@format='xml']/boolean[@operator='and']">
 
               <xed:bind xpath="condition6[@field='origin'][@operator='=']/@value" default="14">
-		<div class="form-group form-inline">
+                <div class="form-group form-inline">
                   <label class="mycore-form-label">
                     <xed:output i18n="search.dozbib.origin" />
                   </label>
-                  <select class="autocomplete mycore-form-input custom-select">
+                  <select class="autocomplete mycore-form-input custom-select" data-container="form-group" data-display="static">
                     <option value="14"><xed:output i18n="search.select" /></option>
                     <xed:include uri="xslStyle:mycoreclass-options:classification:metadata:-1:children:ORIGIN:14" />
                   </select>
                   <script type="text/javascript">
-                    $(document).ready(function() { $('select[class*="autocomplete"]').selectpicker({liveSearch:true, liveSearchNormalize:true, virtualScroll:true, showSubtext:true, size:10}); });
+                    $(document).ready(function() {
+
+                      $('select[class*="autocomplete"]').selectpicker({
+                        liveSearch:true,
+                        liveSearchNormalize:true,
+                        virtualScroll:true,
+                        showSubtext:true,
+                        size:10,
+                        width:'auto',
+                        dropupAuto: false
+                      });
+
+                    });
                   </script>
-		</div>
+                </div>
               </xed:bind>
 
               <xed:bind xpath="condition2[@operator='contains']/@field" initially="person_ths" />
               <xed:include uri="webapp:import-search.xed" ref="name" />
 
               <xed:bind xpath="condition4[@field='title'][@operator='contains']/@value">
-		<div class="form-group form-inline">
+                <div class="form-group form-inline">
                   <label class="mycore-form-label">
                     <xed:output i18n="search.title" />
                   </label>
                   <input type="text" class="mycore-form-input" />
-		</div>
+                </div>
               </xed:bind>
 
               <xed:include uri="webapp:import-search.xed" ref="year" />

diff --git a/ubo-common/src/main/resources/META-INF/resources/search.xed b/ubo-common/src/main/resources/META-INF/resources/search.xed
@@ -145,13 +145,25 @@
                 <label for="{xed:generate-id()}" class="mycore-form-label">
                   <xed:output i18n="ubo.department" />:
                 </label>
-                <select id="{xed:generate-id()}" class="autocomplete mycore-form-input custom-select">
+                <select id="{xed:generate-id()}" class="autocomplete mycore-form-input custom-select" data-container="form-group" data-display="static">
                   <option value=""><xed:output i18n="search.select" /></option>
                   <xed:include uri="xslStyle:mycoreclass-options:classification:metadata:-1:children:ORIGIN" />
                 </select>
               </div>
               <script type="text/javascript">
-                $(document).ready(function() { $('select[class*="autocomplete"]').selectpicker({liveSearch:true, liveSearchNormalize:true, virtualScroll:true, showSubtext:true, size:10}); });
+                $(document).ready(function() {
+
+                  $('select[class*="autocomplete"]').selectpicker({
+                    liveSearch:true,
+                    liveSearchNormalize:true,
+                    virtualScroll:true,
+                    showSubtext:true,
+                    size:10,
+                    width:'auto',
+                    dropupAuto: false
+                  });
+
+                });
               </script>
             </xed:bind>