From 8a12da738bbf73158c9643a4c8e52d11595baa10 Mon Sep 17 00:00:00 2001
From: Yousaf Nawaz <91653057+yousafnawaz@users.noreply.github.com>
Date: Fri, 25 Feb 2022 02:03:49 +0500
Subject: [PATCH] docs(material/slider): adjust CSS of configurable slider
 example (#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
---
 .../slider-configurable-example.css                    |  9 +++++++--
 .../slider-configurable-example.html                   | 10 +++++-----
 2 files changed, 12 insertions(+), 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
index ba363902eaae..d99a67b786cb 100644
--- 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
index 4e55e6c868cd..9b5ca493b6d9 100644
--- 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>