Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

md-select moves DOM elements and puts them back in the wrong position #2456

Closed
guzza opened this issue Apr 21, 2015 · 10 comments
Closed

md-select moves DOM elements and puts them back in the wrong position #2456

guzza opened this issue Apr 21, 2015 · 10 comments
Assignees
@rschmukler
Labels
needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue type: bug
Milestone
0.9.0

Comments

@guzza
Copy link

guzza commented Apr 21, 2015

When md-select gets opened it rearranges the DOM and the layout goes crazy.
The layout of the site is <body layout="row"> with 2 main children one being <md-sidenav> and second being the main <div layout="column" layout-fill role="main" ui-view="main"></div> where the Angular injects the view. md-select is located inside the <div ui-view="main".

First screenshot is before md-select is opened
screen shot 2015-04-21 at 16 51 44

This screenshots is while its open
screen shot 2015-04-21 at 16 52 06

And finally when md-select is closed we can see the action moved the <div ui-view="main"> to the top effectively moving the <md-sidenav> from left to right because of the flex layout ordering.
screen shot 2015-04-21 at 16 52 18
@rhnatiuk
Copy link

Is it linked to #2447 ? There is clearly something fishy going with md-select in last builds.

@guzza
Copy link
Author

guzza commented Apr 22, 2015

Issue #2447 is about the delay while opening, this one is more that it moves elements in the main DOM after md-select has been opened and then closed and puts them back in the wrong place thereby changing the layout that uses flexbox and in my case md-sidenav gets moved to the right side from left.

@rhnatiuk
Copy link

I understand it. What I meant is that the delay can also be caused by DOM rebuilding back and forth. Also there is displacement of selector text, and page jump to top if select is at its bottom (added it to comments in #2447 earlier today). At least it sounds plausible.

@scriptsure
Copy link

Having similar issue with #2390.

@ThomasBurleson ThomasBurleson added this to the 0.10.0 milestone Apr 22, 2015
@rhnatiuk rhnatiuk mentioned this issue Apr 23, 2015
Closed
@guzza
Copy link
Author

guzza commented Apr 23, 2015

The issue is probably inside $mdSelect provider in the functions .show() and .hide() that is defined here. Specifically I see that when $mdSelect.show() is called the parent property is not passed in and later on in $mdSelect the parent is set by default to <body>. After that it is used as opts.parent in multiple places but my insight of the code is not good enough and I don't have time to get more into it to find where exactly it goes haywire. I'm thinking that animateSelect could be the culprit - link

@ngraef ngraef mentioned this issue Apr 23, 2015
Closed
@rschmukler rschmukler modified the milestones: 0.9.0, 0.10.0 Apr 23, 2015
@rschmukler
Copy link
Contributor

@guzza can you provide a code pen demoing this? I tried re-creating it and it doesn't appear to still be happening. Is it resolved now? If not, could you provide some browser/OS details so I can explore further?

@rschmukler rschmukler added the needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue label Apr 23, 2015
@fredrikbonander
Copy link

I have a similar problem with this. I have a Google Map with markers that drops in on render.

So when md-select moves content the Google Map runs all the animations again. Could we have a option for not have a backdrop for the select list?

@gustavohenke
Copy link

👍 for this issue.
I noted that the <!-- uiView: ... --> comment is the responsible for moving stuff into the wrong places, as it's the only thing that's not wrapper when the select is opened.

@gustavohenke gustavohenke mentioned this issue Apr 27, 2015
Closed
@gustavohenke
Copy link

Submitted a PR to fix this: #2571

@guzza
Copy link
Author

guzza commented Apr 27, 2015

I just pulled the fresh version with @gustavohenke fix and its fine now puts back elements properly.

@gustavohenke gustavohenke mentioned this issue Apr 28, 2015
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@rschmukler rschmukler

Labels
needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue type: bug
Projects
None yet
Milestone
0.9.0
Development

Successfully merging a pull request may close this issue.

fix(mdUtil): move comment nodes as well when disabling scroll
7 participants
@fredrikbonander @guzza @ThomasBurleson @rschmukler @scriptsure @gustavohenke @rhnatiuk