[NA] style(st-dropdown-menu): Allow to display dropdown items in seve…

…ral lines when container's width is smaller (#833)
jdiaz-stratio · Jan 13, 2020 · 37a3c58 · 37a3c58
1 parent 81d7109
commit 37a3c58
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,17 +5,16 @@
 **New features:**
 
 * st-input: Allow to display an autocomplete list in order to select a predefined text
+* st-menu: Create component
+* grid: Allow to customize max-width with a css variable
+* st-progress-bar: Option for a bigger progress-bar
 
 **Others:**
 
 * Update icon font to 1.26
 * Remove min-width in bubble component
+* st-dropdown-menu: Allow to display dropdown items in several lines when container's width is smaller
 
-**New features:**
-
-* st-menu: Create component
-* grid: Allow to customize max-width with a css variable
-* progress-bar: Option for a bigger progress-bar
 
 ## 17.2.0 (October 25, 2019)
 

diff --git a/projects/egeo-demo/src/app/demos/st-dropdown-menu-demo/st-dropdown-menu-demo.html b/projects/egeo-demo/src/app/demos/st-dropdown-menu-demo/st-dropdown-menu-demo.html
@@ -39,7 +39,7 @@ <h1>{{titles[idx]}}</h1>
       <div>
          <h1>Scroll with Loading more spinner</h1>
          <br>
-         <st-dropdown-menu [keyBoardMove]="true" [items]="this.menus[5]" [active]="active[5]"
+         <st-dropdown-menu [keyBoardMove]="true" [items]="menus[5]" [active]="active[5]"
             [selectedItem]="selectedValue[5]"
             [attr.id]="'dropdown-' + 5" (change)="onChange($event, 5)"
             (scrollAtBottom)="onScrollAtBottom()" [isLoading]="isLoading">

diff --git a/projects/egeo-demo/src/app/modules/demos/demo-layout/demo.layout.scss~HEAD b/projects/egeo-demo/src/app/modules/demos/demo-layout/demo.layout.scss~HEAD
diff --git a/projects/egeo/src/theme/components/_dropdown-menu.scss b/projects/egeo/src/theme/components/_dropdown-menu.scss
@@ -44,11 +44,9 @@
 
          .spinner {
             display: block;
-            margin: auto;
+            margin: 20px auto 14px auto;
             width: 20px;
             height: 20px;
-            margin-bottom: 14px;
-            margin-top: 20px;
          }
       }
     }
@@ -93,7 +91,6 @@
        .label {
           @extend %select-dropdown-menu-default;
           display: inline-flex;
-          white-space: nowrap;
        }
 
        & .text-info {

diff --git a/projects/egeo/src/theme/components/_input.scss b/projects/egeo/src/theme/components/_input.scss
@@ -30,6 +30,8 @@
          margin-top: -1px;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
+         max-width: 100%;
+         word-break: break-word;
       }
    }