make dropdown adjust to form field's font size (still 1px rounding erorr

in some cases)

Author: mmalerba

src/lib/select/select.html

@@ -1,6 +1,7 @@
 <div #trigger #origin="cdkOverlayOrigin" cdk-overlay-origin class="mat-select-trigger"
      aria-hidden="true" (click)="toggle()">
   <span class="mat-select-value">
+    <div #measureFontSize class="mat-select-measure-font-size" aria-hidden="true"></div>
     <span class="mat-select-value-text" *ngIf="!empty" [ngSwitch]="!!customTrigger">
       <span *ngSwitchDefault>{{ triggerValue }}</span>
       <ng-content select="md-select-trigger, mat-select-trigger" *ngSwitchCase="true"></ng-content>
@@ -31,7 +32,8 @@
     (@transformPanel.done)="_onPanelDone()"
     (keydown)="_handlePanelKeydown($event)"
     [style.transformOrigin]="_transformOrigin"
-    [class.mat-select-panel-done-animating]="_panelDoneAnimating">
+    [class.mat-select-panel-done-animating]="_panelDoneAnimating"
+    [style.font-size.px]="_triggerFontSize">
 
     <div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
       <ng-content></ng-content>

src/lib/select/select.scss

@@ -8,6 +8,7 @@ $mat-select-trigger-min-width: 112px !default;
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 256px !default;
+$mat-select-item-height: 3em !default;
 
 .mat-select {
   display: inline-block;
@@ -65,3 +66,21 @@ $mat-select-panel-max-height: 256px !default;
     outline: solid 1px;
   }
 }
+
+.mat-select-measure-font-size {
+  position: absolute;
+  display: block;
+  height: 1em;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+// Override optgroup and option to scale based on font-size of the trigger.
+.mat-select-panel {
+  .mat-optgroup-label,
+  .mat-option {
+    font-size: inherit;
+    line-height: $mat-select-item-height;
+    height: $mat-select-item-height;
+  }
+}

src/lib/select/select.ts

@@ -64,31 +64,18 @@ let nextUniqueId = 0;
  * the trigger element.
  */
 
-/** The fixed height of every option element (option, group header etc.). */
-export const SELECT_ITEM_HEIGHT = 48;
-
 /** The max height of the select's overlay panel */
 export const SELECT_PANEL_MAX_HEIGHT = 256;
 
-/** The max number of options visible at once in the select panel. */
-export const SELECT_MAX_OPTIONS_DISPLAYED =
-    Math.floor(SELECT_PANEL_MAX_HEIGHT / SELECT_ITEM_HEIGHT);
-
-/** The fixed height of the select's trigger element. */
-export const SELECT_TRIGGER_HEIGHT = 30;
-
-/**
- * Must adjust for the difference in height between the option and the trigger,
- * so the text will align on the y axis.
- */
-export const SELECT_OPTION_HEIGHT_ADJUSTMENT = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT) / 2;
-
 /** The panel's padding on the x-axis */
 export const SELECT_PANEL_PADDING_X = 16;
 
 /** The panel's x axis padding if it is indented (e.g. there is an option group). */
 export const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
 
+/** The height of the select items in `em` units. */
+export const SELECT_ITEM_HEIGHT_EM = 3;
+
 /**
  * Distance between the panel edge and the option text in
  * multi-selection mode.
@@ -223,6 +210,12 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
   /** Tab index for the element. */
   private _tabIndex: number;
 
+  /** The cached height of the trigger element. */
+  private _triggerHeight: number;
+
+  /** The cached font-size of the trigger element. */
+  _triggerFontSize = 0;
+
   /** Deals with the selection logic. */
   _selectionModel: SelectionModel<MdOption>;
 
@@ -297,6 +290,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
   /** Trigger that opens the select. */
   @ViewChild('trigger') trigger: ElementRef;
 
+  /** Element used to measure the font-size of the trigger element. */
+  @ViewChild('measureFontSize') _measureFontSizeEl: ElementRef;
+
   /** Overlay pane containing the options. */
   @ViewChild(ConnectedOverlayDirective) overlayDir: ConnectedOverlayDirective;
 
@@ -866,31 +862,29 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
 
   /** Calculates the scroll position and x- and y-offsets of the overlay panel. */
   private _calculateOverlayPosition(): void {
+    this._triggerHeight = this.trigger.nativeElement.getBoundingClientRect().height;
+    this._triggerFontSize = this._measureFontSizeEl.nativeElement.getBoundingClientRect().height;
+
+    const itemHeight = this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
+
     const items = this._getItemCount();
-    const panelHeight = Math.min(items * SELECT_ITEM_HEIGHT, SELECT_PANEL_MAX_HEIGHT);
-    const scrollContainerHeight = items * SELECT_ITEM_HEIGHT;
+    const panelHeight = Math.min(items * itemHeight, SELECT_PANEL_MAX_HEIGHT);
+    const scrollContainerHeight = items * itemHeight;
 
     // The farthest the panel can be scrolled before it hits the bottom
     const maxScroll = scrollContainerHeight - panelHeight;
 
-    if (!this.empty) {
-      let selectedOptionOffset = this._getOptionIndex(this._selectionModel.selected[0])!;
+    // If no value is selected we open the popup to the first item.
+    let selectedOptionOffset =
+        this.empty ? 0 : this._getOptionIndex(this._selectionModel.selected[0])!;
 
-      selectedOptionOffset += this._getLabelCountBeforeOption(selectedOptionOffset);
+    selectedOptionOffset += this._getLabelCountBeforeOption(selectedOptionOffset);
 
-      // We must maintain a scroll buffer so the selected option will be scrolled to the
-      // center of the overlay panel rather than the top.
-      const scrollBuffer = panelHeight / 2;
-      this._scrollTop = this._calculateOverlayScroll(selectedOptionOffset, scrollBuffer, maxScroll);
-      this._offsetY = this._calculateOverlayOffsetY(selectedOptionOffset, scrollBuffer, maxScroll);
-    } else {
-      // If no option is selected, the panel centers on the first option. In this case,
-      // we must only adjust for the height difference between the option element
-      // and the trigger element, then multiply it by -1 to ensure the panel moves
-      // in the correct direction up the page.
-      this._offsetY = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT) / 2 * -1 -
-          (this._getLabelCountBeforeOption(0) * SELECT_ITEM_HEIGHT);
-    }
+    // We must maintain a scroll buffer so the selected option will be scrolled to the
+    // center of the overlay panel rather than the top.
+    const scrollBuffer = panelHeight / 2;
+    this._scrollTop = this._calculateOverlayScroll(selectedOptionOffset, scrollBuffer, maxScroll);
+    this._offsetY = this._calculateOverlayOffsetY(selectedOptionOffset, scrollBuffer, maxScroll);
 
     this._checkOverlayWithinViewport(maxScroll);
   }
@@ -904,8 +898,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
    */
   _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number,
                           maxScroll: number): number {
-    const optionOffsetFromScrollTop = SELECT_ITEM_HEIGHT * selectedIndex;
-    const halfOptionHeight = SELECT_ITEM_HEIGHT / 2;
+    const itemHeight = this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
+    const optionOffsetFromScrollTop = itemHeight * selectedIndex;
+    const halfOptionHeight = itemHeight / 2;
 
     // Starts at the optionOffsetFromScrollTop, which scrolls the option to the top of the
     // scroll container, then subtracts the scroll buffer to scroll the option down to
@@ -975,31 +970,34 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
    */
   private _calculateOverlayOffsetY(selectedIndex: number, scrollBuffer: number,
                                   maxScroll: number): number {
+    const itemHeight = this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
+    const optionHeightAdjustment = (itemHeight - this._triggerHeight) / 2;
+    const maxOptionsDisplayed = Math.floor(SELECT_PANEL_MAX_HEIGHT / itemHeight);
     let optionOffsetFromPanelTop: number;
 
     if (this._scrollTop === 0) {
-      optionOffsetFromPanelTop = selectedIndex * SELECT_ITEM_HEIGHT;
+      optionOffsetFromPanelTop = selectedIndex * itemHeight;
     } else if (this._scrollTop === maxScroll) {
-      const firstDisplayedIndex = this._getItemCount() - SELECT_MAX_OPTIONS_DISPLAYED;
+      const firstDisplayedIndex = this._getItemCount() - maxOptionsDisplayed;
       const selectedDisplayIndex = selectedIndex - firstDisplayedIndex;
 
       // Because the panel height is longer than the height of the options alone,
       // there is always extra padding at the top or bottom of the panel. When
       // scrolled to the very bottom, this padding is at the top of the panel and
       // must be added to the offset.
       optionOffsetFromPanelTop =
-          selectedDisplayIndex * SELECT_ITEM_HEIGHT + SELECT_PANEL_PADDING_Y;
+          selectedDisplayIndex * itemHeight + SELECT_PANEL_PADDING_Y;
     } else {
       // If the option was scrolled to the middle of the panel using a scroll buffer,
       // its offset will be the scroll buffer minus the half height that was added to
       // center it.
-      optionOffsetFromPanelTop = scrollBuffer - SELECT_ITEM_HEIGHT / 2;
+      optionOffsetFromPanelTop = scrollBuffer - itemHeight / 2;
     }
 
     // The final offset is the option's offset from the top, adjusted for the height
     // difference, multiplied by -1 to ensure that the overlay moves in the correct
     // direction up the page.
-    return optionOffsetFromPanelTop * -1 - SELECT_OPTION_HEIGHT_ADJUSTMENT;
+    return optionOffsetFromPanelTop * -1 - optionHeightAdjustment;
   }
 
   /**
@@ -1009,6 +1007,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
    * sets the offset back to 0 to allow the fallback position to take over.
    */
   private _checkOverlayWithinViewport(maxScroll: number): void {
+    const itemHeight = this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
     const viewportRect = this._viewportRuler.getViewportRect();
     const triggerRect = this._getTriggerRect();
 
@@ -1018,7 +1017,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
 
     const panelHeightTop = Math.abs(this._offsetY);
     const totalPanelHeight =
-        Math.min(this._getItemCount() * SELECT_ITEM_HEIGHT, SELECT_PANEL_MAX_HEIGHT);
+        Math.min(this._getItemCount() * itemHeight, SELECT_PANEL_MAX_HEIGHT);
     const panelHeightBottom = totalPanelHeight - panelHeightTop - triggerRect.height;
 
     if (panelHeightBottom > bottomSpaceAvailable) {
@@ -1074,8 +1073,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
 
   /** Sets the transform origin point based on the selected option. */
   private _getOriginBasedOnOption(): string {
-    const originY =
-        Math.abs(this._offsetY) - SELECT_OPTION_HEIGHT_ADJUSTMENT + SELECT_ITEM_HEIGHT / 2;
+    const itemHeight = this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
+    const optionHeightAdjustment = (itemHeight - this._triggerHeight) / 2;
+    const originY = Math.abs(this._offsetY) - optionHeightAdjustment + itemHeight / 2;
     return `50% ${originY}px 0px`;
   }