Skip to content

bug(md-select): change the arrow position to absolute #3242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

bug(md-select): change the arrow position to absolute #3242

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3db8314
md-select: change the arrow position to absolute so it will not chang…
jefersonestevo Feb 22, 2017
0f26360
Merge branch 'master' into issue-3112
jefersonestevo Mar 2, 2017
1c62f87
Merge branch 'master' into issue-3112
jefersonestevo Mar 7, 2017
a565ca3
Merge branch 'master' into issue-3112
jefersonestevo Mar 13, 2017
6abfb7c
removing demo for select on flex container
jefersonestevo Mar 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/demo-app/select/select-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,27 @@

</div>
<div style="height: 500px">This div is for testing scrolled selects.</div>

<md-card>
Copy link
Member

@crisbeto crisbeto Mar 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need this example. The examples in the demo app are there to be able to click around the main use cases, they're not for actual testing.

<md-card-header>Inside Simple Flex Layout</md-card-header>
<div class="demo-flex-line">
<div class="demo-flex-column">
<md-select placeholder="Starter Pokemon" [(ngModel)]="flex1">
<md-option *ngFor="let starter of pokemon" [value]="starter.value"> {{ starter.viewValue }} </md-option>
</md-select>
</div>

<div class="demo-flex-column">
<md-select placeholder="Starter Pokemon 2" [(ngModel)]="flex2">
<md-option *ngFor="let starter of pokemon" [value]="starter.value"> {{ starter.viewValue }} </md-option>
</md-select>
</div>

<div class="demo-flex-column">
<md-select placeholder="Starter Pokemon 3" [(ngModel)]="flex3">
<md-option *ngFor="let starter of pokemon" [value]="starter.value"> {{ starter.viewValue }} </md-option>
<md-option value="long-name-pokemont-0">A really long name for a pokemon. A pokemon should really be named like that?</md-option>
</md-select>
</div>
</div>
</md-card>
23 changes: 22 additions & 1 deletion src/demo-app/select/select-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,25 @@
margin: 24px;
}

}
}

.demo-flex-line {
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: stretch;
align-content: stretch;
align-items: stretch;

.demo-flex-column {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}

md-select {
margin: 10px 0;
width: 100%;
}
}

3 changes: 3 additions & 0 deletions src/demo-app/select/select-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ export class SelectDemo {
isDisabled = false;
showSelect = false;
currentDrink: string;
flex1: string;
flex2: string;
flex3: string;
latestChangeEvent: MdSelectChange;
floatPlaceholder: string = 'auto';
foodControl = new FormControl('pizza-1');
Expand Down
7 changes: 7 additions & 0 deletions src/lib/select/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,12 +111,19 @@ $mat-select-trigger-font-size: 16px !default;
}

.mat-select-arrow {
position: absolute;
right: 0;
width: 0;
height: 0;
border-left: $mat-select-arrow-size solid transparent;
border-right: $mat-select-arrow-size solid transparent;
border-top: $mat-select-arrow-size solid;
margin: 0 $mat-select-arrow-margin;

[dir='rtl'] & {
right: auto;
left: 0;
}
}

.mat-select-panel {
Expand Down