docs(material/slider): adjust CSS of configurable slider example (ang…

…ular#24156) * docs(material/slider): adjust CSS of configurable slider example modify CSS of configurable slider example to adjust according to device * docs(material/slider): adjust CSS of configurable slider example modify CSS of configurable slider example to adjust according to device
forsti0506 · Apr 3, 2022 · 19825e8 · 19825e8
1 parent 40249cb
commit 19825e8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.css
@@ -4,17 +4,22 @@
 
 .example-section {
   display: flex;
+  flex-wrap: wrap;
   align-content: center;
   align-items: center;
-  height: 60px;
 }
 
 .example-margin {
   margin: 8px;
 }
+.example-width {
+  max-width: 180px;
+  width: 100%;
+}
 
 .mat-slider-horizontal {
-  width: 300px;
+  max-width: 300px;
+  width: 100%;
 }
 
 .mat-slider-vertical {

diff --git a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.html b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.html
@@ -3,19 +3,19 @@
     <h2 class="example-h2">Slider configuration</h2>
 
     <section class="example-section">
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Value</mat-label>
         <input matInput type="number" [(ngModel)]="value">
       </mat-form-field>
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Min value</mat-label>
         <input matInput type="number" [(ngModel)]="min">
       </mat-form-field>
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Max value</mat-label>
         <input matInput type="number" [(ngModel)]="max">
       </mat-form-field>
-      <mat-form-field class="example-margin" appearance="fill">
+      <mat-form-field class="example-margin example-width" appearance="fill">
         <mat-label>Step size</mat-label>
         <input matInput type="number" [(ngModel)]="step">
       </mat-form-field>
@@ -26,7 +26,7 @@ <h2 class="example-h2">Slider configuration</h2>
       <mat-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
         Auto ticks
       </mat-checkbox>
-      <mat-form-field class="example-margin" appearance="fill" *ngIf="showTicks && !autoTicks">
+      <mat-form-field class="example-margin example-width" appearance="fill" *ngIf="showTicks && !autoTicks">
         <mat-label>Tick interval</mat-label>
         <input matInput type="number" [(ngModel)]="tickInterval">
       </mat-form-field>