mat-select-underline in google chrome

[xonuzofa]

Bug, feature request, or proposal:

beta 7 - Issue with mat-select-underline. Not showing sometimes, inside of table and other random times.

    <dt>CTU</dt>
    <dd>
        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-6">
                <md-select [(ngModel)]="id_ctu" placeholder="CTU" (change)="onChangeCTUSelect($event)">
                    <md-option *ngFor="let ctu of ctus" [value]="ctu._id">{{ctu.unit}}</md-option>
                </md-select>
            </div>
        </div>
    </dd>
    <dt style="margin-top: 10px;">MP</dt>
    <dd>
        <div class="row" style="margin-top: 20px;">
            <div class="col-sm-6">
                <md-select [(ngModel)]="id_mp" placeholder="MP" (change)="onChangeMPSelect($event)">
                    <md-option *ngFor="let mp of mps" [value]="mp._id">{{mp.unit}}</md-option>
                </md-select>
            </div>
        </div>
    </dd>

<dt>Accounting Code</dt>
<dd>
    <div class="row" style="margin-top: 20px;">
        <div class="col-sm-6">
            <md-select [(ngModel)]="id_accountingcode" placeholder="Accounting Code" (change)="onChangeAccountingCodeSelect($event)">
                <md-option *ngFor="let accountingcode of accountingcodes" [value]="accountingcode._id">{{accountingcode.description}}</md-option>
            </md-select>
        </div>
    </div>
    <div class="row" style="margin-top: 20px;">
        <div class="col-sm-6">
            <md-select [(ngModel)]="subaccounting_code" placeholder="Subaccounting Code" (change)="onChangeSubaccountingCodeSelect($event)">
                <md-option *ngFor="let subaccountingcode of getSubAccountingCodes()" [value]="subaccountingcode.description">{{ subaccountingcode.description }}</md-option>
            </md-select>
        </div>
    </div>
</dd>

Same code for both, two has underlines, two does not.

Now I have messed with the styling in chrome and have increased the class mat-select-underline to height 2px instead of 1px and this is the result I get.

I am also getting similar results inside a table.

Above are in chrome. Below are in safari.

[xonuzofa]

Seems like an issue with the browser and zooming. Different zooms percentages show and don't show lines.

[mmalerba]

@xonuzofa have you tried with the input by any chance? I'm currently refactoring the select to share more code with the input so this might go away if it's not a problem with the input

[xonuzofa]

So I have moved away from the material library since. The mdselect boxes didnt align properly, there were some bugs with the z-index and drop down, theres no way to control the dropdown direction. Md-hints are also very messy. I messed with css and got it to work somewhat but I found that using native boostrap 4 element with form groups and using the built in validator classes you can very easily build a color schema for required, warning, invalid and successful. It looks much more professional now and is easier for the user to see which fields must be filled out.

[mmalerba]

I do see the problem at 90% zoom on the select, looks like the move to share code with input will resolve it though http://plnkr.co/edit/yUzFm4zqxwsS8hx4oqm4?p=preview

will be fixed by #6488

[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.}