Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8a12da7

Browse files
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
1 parent 426afa0 commit 8a12da7

File tree

2 files changed

+12
-7
lines changed

2 files changed

+12
-7
lines changed

‎src/components-examples/material/slider/slider-configurable/slider-configurable-example.css

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,22 @@
44

55
.example-section {
66
display: flex;
7+
flex-wrap: wrap;
78
align-content: center;
89
align-items: center;
9-
height: 60px;
1010
}
1111

1212
.example-margin {
1313
margin: 8px;
1414
}
15+
.example-width {
16+
max-width: 180px;
17+
width: 100%;
18+
}
1519

1620
.mat-slider-horizontal {
17-
width: 300px;
21+
max-width: 300px;
22+
width: 100%;
1823
}
1924

2025
.mat-slider-vertical {

‎src/components-examples/material/slider/slider-configurable/slider-configurable-example.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33
<h2 class="example-h2">Slider configuration</h2>
44

55
<section class="example-section">
6-
<mat-form-field class="example-margin" appearance="fill">
6+
<mat-form-field class="example-margin example-width" appearance="fill">
77
<mat-label>Value</mat-label>
88
<input matInput type="number" [(ngModel)]="value">
99
</mat-form-field>
10-
<mat-form-field class="example-margin" appearance="fill">
10+
<mat-form-field class="example-margin example-width" appearance="fill">
1111
<mat-label>Min value</mat-label>
1212
<input matInput type="number" [(ngModel)]="min">
1313
</mat-form-field>
14-
<mat-form-field class="example-margin" appearance="fill">
14+
<mat-form-field class="example-margin example-width" appearance="fill">
1515
<mat-label>Max value</mat-label>
1616
<input matInput type="number" [(ngModel)]="max">
1717
</mat-form-field>
18-
<mat-form-field class="example-margin" appearance="fill">
18+
<mat-form-field class="example-margin example-width" appearance="fill">
1919
<mat-label>Step size</mat-label>
2020
<input matInput type="number" [(ngModel)]="step">
2121
</mat-form-field>
@@ -26,7 +26,7 @@ <h2 class="example-h2">Slider configuration</h2>
2626
<mat-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
2727
Auto ticks
2828
</mat-checkbox>
29-
<mat-form-field class="example-margin" appearance="fill" *ngIf="showTicks && !autoTicks">
29+
<mat-form-field class="example-margin example-width" appearance="fill" *ngIf="showTicks && !autoTicks">
3030
<mat-label>Tick interval</mat-label>
3131
<input matInput type="number" [(ngModel)]="tickInterval">
3232
</mat-form-field>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /