MatSelect: fullwidth impl

src/MatBlazor.Demo/Demo/DemoMatSelect.razor

@@ -83,7 +83,7 @@
 </DemoContainer>
 
 
-<MatAnchorContainer Anchor="MatSelectInt">
+<MatAnchorContainer Anchor="MatSelectGuid">
     <MatH5>MatSelect Guid?</MatH5>
 </MatAnchorContainer>
 <DemoContainer>
@@ -257,4 +257,27 @@
         </MatSelect>
     ")></BlazorFiddle>
     </SourceContent>
+</DemoContainer>
+
+
+<h5 class="mat-h5">FullWidth</h5>
+<DemoContainer>
+    <Content>
+        <MatSelect Label="Pick a Food Group" FullWidth="true" TValue="string">
+            <MatOptionString></MatOptionString>
+            <MatOptionString Value="grains">Bread, Cereal, Rice, and Pasta</MatOptionString>
+            <MatOptionString Value="vegetables">Vegetables</MatOptionString>
+            <MatOptionString Value="fruit">Fruit</MatOptionString>
+        </MatSelect>
+    </Content>
+    <SourceContent>
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
+        <MatSelect Label=""Pick a Food Group"" FullWidth=""true"" TValue=""string"">
+            <MatOptionString></MatOptionString>
+            <MatOptionString Value=""grains"">Bread, Cereal, Rice, and Pasta</MatOptionString>
+            <MatOptionString Value=""vegetables"">Vegetables</MatOptionString>
+            <MatOptionString Value=""fruit"">Fruit</MatOptionString>
+        </MatSelect>
+    ")></BlazorFiddle>
+    </SourceContent>
 </DemoContainer>

src/MatBlazor.Web/src/matSelect/matSelect.js

@@ -3,16 +3,12 @@ import MDCSelectFoundation from '@material/select/foundation';
 import {hoistMenuToBody} from '../matMenu/matMenu';
 
 
-
+    
 export class MatSelect {
   constructor(ref, component, value) {
 
     this.select = new MDCSelect(ref);
 
-
-    hoistMenuToBody(this.select.menu);
-
-
     this.select.value = value;
 
     this.select.listen('MDCSelect:change', () => {

src/MatBlazor/Components/MatSelect/BaseCoreMatSelect.cs

@@ -30,6 +30,9 @@ public BaseCoreMatSelect()
                 .If("mdc-select--disabled", () => Disabled)
                 .If("mdc-select--with-leading-icon", () => Icon != null);
 
+            StyleMapper
+                .If("width: 100%", () => FullWidth);
+
             HelperTextClassMapper
                 .Add("mdc-text-field-helper-text")
                 .If("mdc-text-field-helper-text--persistent", () => HelperTextPersistent)
@@ -129,7 +132,8 @@ public bool Enhanced
         [Parameter]
         public bool HideDropDownIcon { get; set; }
 
-
+        [Parameter]
+        public bool FullWidth { get; set; }
 
         [Parameter]
         public EventCallback<MouseEventArgs> IconOnClick { get; set; }

src/MatBlazor/Components/MatSelect/CoreMatSelect.razor

@@ -65,16 +65,15 @@
             {
                 <i class="material-icons mdc-select__icon" tabindex="@(IconOnClick.HasDelegate ? "0" : null)" onclick="@IconOnClick">@Icon</i>
             }
-
         </div>
 
-
-        <div class="mdc-select__menu mdc-menu mdc-menu-surface">
+        <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="@(FullWidth ? "width: 100%;" : "")">
             <ul class="mdc-list">
                 @GetChildContent()
             </ul>
         </div>
 
+
     </div>
     @if (HelperText != null)
     {