md-select doesn't expand + md-option text overflow doesn't work properly

[fxck]

using 2.0.0-beta.1-592f33f

since .md-select-value is absolutely positioned, it doesn't expand its parent and is flowing out it

also because of display: flex on md-option, ellipsis(three dots) do not work

@kara I guess? could try to fix it, but would like to know reasoning behind that absolute position and flex first..

[crisbeto]

Can't speak about the positioning, but the text ellipsis were fixed recently.

[fxck]

were they? I think I'm running the latest version from material2-builds(unless yarn is acting up again)

edit: yep, ellipsis seems to be fixed when I use npm instead, positioning still wrong

[PostImpatica]

I did the following to allow the text to autoresize:

html

<form>
    <md-select #fixit placeholder="Filter">
        <md-option  *ngFor="let txt of linkCategories$ | async" (onSelect)="change(txt)">
            {{ txt }}
        </md-option>
    </md-select>
</form>

component:

@ViewChild('fixit') fixit: MdSelect;

...

change(txt: string) {
    const font = window.getComputedStyle(this.fixit['_element'].nativeElement, null).getPropertyValue('font');
    let newwidth = 0;
    let canvas = document.createElement("canvas");
    let context = canvas.getContext("2d");
    context.font = font;
    let metrics = context.measureText(txt);
    newwidth = metrics.width + 18;
    this.fixit._selectedValueWidth = newwidth;
    this.fixit._triggerWidth = newwidth;
    // do something with selected txt
}

[crisbeto]

This should've been resolved a long time ago.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}