fix(esl-select): specify max-height for standalone list in pixels & f…

…or list in dropdown in vh
exadel-inc · May 31, 2021 · 70ed2f0 · 70ed2f0
1 parent 9dfadc4
commit 70ed2f0
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 1 deletion.
diff --git a/pages/views/pages/forms/esl-select.html b/pages/views/pages/forms/esl-select.html
@@ -582,6 +582,76 @@
               <option value="#72A0C1">Air superiority blue</option>
               <option value="#EDEAE0">Alabaster</option>
               <option value="#EFDECD">Almond</option>
+              <option value="#E52B50">Amaranth</option>
+              <option value="#3B7A57">Amazon</option>
+              <option value="#FFBF00">Amber</option>
+              <option value="#FF7E00">Amber (SAE/ECE)</option>
+              <option value="#9966CC">Amethyst</option>
+              <option value="#A4C639">Android green</option>
+              <option value="#CD9575">Antique brass</option>
+              <option value="#665D1E">Antique bronze</option>
+              <option value="#915C83">Antique fuchsia</option>
+              <option value="#841B2D">Antique ruby</option>
+              <option value="#BF4F51">Bittersweet shimmer</option>
+              <option value="#000000" selected>Black</option>
+              <option value="#1B1811">Black chocolate</option>
+              <option value="#3B2F2F">Black coffee</option>
+              <option value="#54626F">Black coral</option>
+              <option value="#3B3C36">Black olive</option>
+              <option value="#BFAFB2">Black Shadows</option>
+              <option value="#FFEBCD">Blanched almond</option>
+              <option value="#A57164">Blast-off bronze</option>
+              <option value="#DE5D83">Blush</option>
+              <option value="#79443B">Bole</option>
+              <option value="#E3DAC9">Bone</option>
+              <option value="#006A4E">Bottle green</option>
+              <option value="#87413F">Brandy</option>
+              <option value="#CB4154">Brick red</option>
+              <option value="#66FF00">Bright green</option>
+              <option value="#D891EF">Bright lilac</option>
+              <option value="#C32148">Bright maroon</option>
+              <option value="#1974D2">Bright navy blue</option>
+              <option value="#FFAA1D">Bright yellow (Crayola)</option>
+              <option value="#FF55A3">Brilliant rose</option>
+              <option value="#FB607F">Brink pink</option>
+              <option value="#004225">British racing green</option>
+              <option value="#CD7F32">Bronze</option>
+              <option value="#88540B">Brown</option>
+              <option value="#AF6E4D">Brown sugar</option>
+              <option value="#7BB661">Bud green</option>
+              <option value="#FFC680">Buff</option>
+              <option value="#800020">Burgundy</option>
+              <option value="#DEB887">Burlywood</option>
+              <option value="#A17A74">Burnished brown</option>
+              <option value="#CC5500">Burnt orange</option>
+              <option value="#E97451">Burnt sienna</option>
+              <option value="#8A3324">Burnt umber</option>
+              <option value="#BD33A4">Byzantine</option>
+              <option value="#702963">Byzantium</option>
+              <option value="#536872">Cadet</option>
+              <option value="#5F9EA0">Cadet blue</option>
+              <option value="#A9B2C3">Cadet blue (Crayola)</option>
+              <option value="#91A3B0">Cadet grey</option>
+              <option value="#006B3C">Cadmium green</option>
+              <option value="#ED872D">Cadmium orange</option>
+              <option value="#E30022">Cadmium red</option>
+            </select>
+          </esl-select>
+          <esl-select class="form-group"
+                      style="display: block"
+                      pin-selected
+                      placeholder="Mood">
+            <label for="mood_field" class="form-label">Select your mood</label>
+            <select esl-select-target
+                    id="mood_field"
+                    name="mood_field"
+                    class="form-control">
+              <option>Happy</option>
+              <option>Tired</option>
+              <option>Bored</option>
+              <option>Depressed</option>
+              <option>Scared</option>
+              <option>Excited</option>
             </select>
           </esl-select>
         </div>

diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-list.less b/src/modules/esl-forms/esl-select-list/core/esl-select-list.less
@@ -9,7 +9,7 @@
 
   min-height: 50px;
   height: auto;
-  max-height: 50vh;
+  max-height: 400px;
 
   & > [esl-select-target] {
     /* Visually hidden */

diff --git a/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less b/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less
@@ -20,6 +20,7 @@
   }
 
   .esl-select-list {
+    max-height: 50vh;
     box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
 
     .esl-select-list-container {