Components: MatDialog with MatTabs centering position causes tabs to jump around

Created on 29 Mar 2018  路  4Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Tabs inside a modal stay at a constant position so you can easily click and navigate through them. This could be achieved by setting a top position instead of centering modal.

What is the current behavior?

The modal positions center based on the height of the modal, when using tabs inside a modal the modal jumps around causing mouse users to have to move there mouse to get between tabs.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-5zbvzd

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

Allowing an option to change position of modal based on top value.

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

Angular Material 5.0.4

Is there anything else we should know?

modal-with-tabs

materiadialog feature

Most helpful comment

Specifying top does get the job done but it requires you to calculate the position by hand. It can't really be hardcoded either since the dimensions of the window affect the position as well when you have something like text. It would be nicer if the modal had an option to just stick to its original position after being opened.

All 4 comments

@bsteffl it's already possible to define a top position for the dialog, rather than having it always be centered. Here's a fork of your example that shows it working.

Specifying top does get the job done but it requires you to calculate the position by hand. It can't really be hardcoded either since the dimensions of the window affect the position as well when you have something like text. It would be nicer if the modal had an option to just stick to its original position after being opened.

Closing since there isn't much we can do about this. If we want the dialog to center itself automatically, it has to respond to size changes which will cause the jumping.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shlomiassaf picture shlomiassaf  路  3Comments

julianobrasil picture julianobrasil  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

alanpurple picture alanpurple  路  3Comments

jelbourn picture jelbourn  路  3Comments