Skip to content

Issue with mat-select inside a div with padding and browser resize #8329

Closed
@flipZomb

Description

@flipZomb

Bug, feature request, or proposal:

Have an issue with mat-select component and browser window resizing under specific circumstances.

What is the expected behavior?

mat-select should resize normally, see below.

What is the current behavior?

If I put the mat-select in a div and put padding on the div, then everything seems to work ok at first .... but now make the browser window smaller and use the mat-select again. The mat-select seems shifted out of the visible area.

The padding seems to be what is causing this.

First time ok
usefirsttime_ok

Now Resize
nowresizewindow_notok

What are the steps to reproduce?

this takes the "basic sample" and puts a div with padding around it. Run in window mode.
https://plnkr.co/edit/ouW07jJwjyEGjy9nxeKW?p=preview

What is the use-case or motivation for changing an existing behavior?

Needs to work normally.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Chrome, IE, Firefox, Angular 4,5, Windows, Material 5.0.0-rc0 and older.

Is there anything else we should know?

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions