fix(select): inherit width of the host

related: #4312 This PR makes select inherit it's min. max, and normal width from host. It also makes list item make the headline not wrap. The effect this has is that the width of the menu in select will match that of the select input, but if the contents of the menu are wider than the width of the select, then the menu will be wider than the select input. PiperOrigin-RevId: 535695646
material-components · May 26, 2023 · 086565c · 086565c
1 parent 33daf19
commit 086565c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/list/lib/_list.scss b/list/lib/_list.scss
@@ -36,7 +36,6 @@
     }
 
     color: unset;
-    min-width: 300px;
   }
 
   .md3-list {

diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
@@ -157,6 +157,9 @@
 
   .label-text {
     display: flex;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
     color: var(--_list-item-label-text-color);
     font: var(--_list-item-label-text-type);
 

diff --git a/select/lib/_shared.scss b/select/lib/_shared.scss
@@ -29,9 +29,16 @@
     position: relative;
   }
 
+  .field,
+  .select,
+  md-menu {
+    min-width: 100%;
+    max-width: inherit;
+  }
+
   .field,
   .select {
-    min-width: inherit;
+    width: 100%;
   }
 
   :host {
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,6 @@ @@
         }
         color: unset;
-        min-width: 300px;
       }
       .md3-list {
@@ Expand Down @@