From 5c4e780a8390c3bd5466b7980ea0d13a0073096b Mon Sep 17 00:00:00 2001 From: Jeferson Estevo Date: Mon, 13 Mar 2017 16:09:19 -0300 Subject: [PATCH 1/2] bug(md-select): change the arrow position to absolute Fixes #3112 --- src/lib/select/select.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index e024c72e12ec..42660cf7d5f0 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -111,14 +111,22 @@ $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 { @include mat-menu-base(); padding-top: 0; From d155a88914e5cb6b9cd10ed9b6119fb7c9ab58d7 Mon Sep 17 00:00:00 2001 From: Jeferson Estevo Date: Tue, 14 Mar 2017 15:39:08 -0300 Subject: [PATCH 2/2] bug(md-select): fixes the programmatic calculation of the placeholder width with the new absolute positioned arrow --- src/lib/select/select.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 32915f501b2c..895ab66f5a5c 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -640,10 +640,11 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr /** * Must set the width of the selected option's value programmatically * because it is absolutely positioned and otherwise will not clip - * overflow. The selection arrow is 9px wide, add 4px of padding = 13 + * overflow. The selection arrow is 5px wide, with 4px on each margin. + * add 4px of padding = 17 */ private _setValueWidth() { - this._selectedValueWidth = this._triggerWidth - 13; + this._selectedValueWidth = this._triggerWidth + 17; } /**