Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(select): update the trigger width when select is opened #3623

Closed
wants to merge 2 commits into from

Conversation

emoralesb05
Copy link
Contributor

@emoralesb05 emoralesb05 commented Mar 15, 2017

When changing the width of the md-select (e.g. using flex box) after its rendered, the template[cdk-connected-overlay] does not update its minWidth and keeps the initial minWidth every time its opened. (somewhat the same issue as #3573)

This issue partially happens because the cdk-connected-overlay sets the width, minWidth, etc etc only once and never updates it again.

https://github.com/angular/material2/blob/master/src/lib/core/overlay/overlay-directives.ts#L181

But also because the _triggerWidth property in md-select is never updated either.

Here is a plnkr to demonstrate the issue: http://plnkr.co/edit/ERg71p?p=preview

Steps to reproduce

  • Change the width of the md-select component by entering a diff value in the width input box under it. (both single and multiple md-select's will change)
  • Open either md-select, and notice the width of the cdk-overlay-pane remained the same as when it was initially rendered.

Proposed fix in PR

We just need to set the new _triggerWidth every time the md-select is opened (open()) taking into account dir/offsetX and update the overlayRef#OverlayState in ConnectedOverlayDirective when the template is attached.

https://github.com/angular/material2/blob/master/src/lib/core/overlay/overlay-directives.ts#L188-L202

emoralesb05 added 2 commits March 15, 2017 11:00
when changing the width of the `host` (or using flex box) the `div.cdk-overlay-pane` keeps the initial width
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Mar 15, 2017
@emoralesb05
Copy link
Contributor Author

@crisbeto not sure if this PR affects #3228 and #3247.. or the vision for how it should work

@kara
Copy link
Contributor

kara commented Aug 15, 2017

@emoralesb05 Is this still an issue with the current version? If so, would you mind rebasing? Sorry for the late review.

@kara kara assigned emoralesb05 and unassigned kara Aug 15, 2017
@emoralesb05
Copy link
Contributor Author

@kara yes its still an issue, i updated the plnkr with the latest version to try it.

Rebasing it so we can hopefully merge it soon 😄

@kara
Copy link
Contributor

kara commented Aug 15, 2017

OK, ping me when it's ready for review again :)

@emoralesb05
Copy link
Contributor Author

Im actually gonna create another PR since rebasing 5-6 months worth of code is taking its toll on me haha 😂 ..

@kara
Copy link
Contributor

kara commented Aug 15, 2017

Haha, fair enough. Ping me when your new PR is ready, and I'll review ASAP to avoid more conflicts.

@emoralesb05
Copy link
Contributor Author

@kara i opened #6489 so we can continue in that one 😄

Closing this one

@emoralesb05 emoralesb05 deleted the select-dyn-width branch August 15, 2017 23:42
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants