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

[MdTab] underline misplaced when "fixed" alignment is changed after initial render #1432

Closed
zevdg opened this Issue Jan 24, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@zevdg
Copy link
Contributor

zevdg commented Jan 24, 2018

Steps to reproduce

switch the value of md-alignment on an md-tabs after the initial render between "fixed" and any other value. (e.g. fixed for mobile widths and centered for larger screens).

Which browser?

vue@latest
vue-material@1.0.0-beta-7
at least chrome and chrome for android

What is expected?

the tab underlines should line up with the tabs

What is actually happening?

The underline is not the right width or in the right location.

Reproduction Link

https://codepen.io/zevdg/pen/XzOWma

@Samuell1 Samuell1 added the bug label Jan 24, 2018

VdustR added a commit to VdustR/vue-material that referenced this issue Jan 25, 2018

fix(MdTabs): correct indicator position while alignment changed
`setIndicatorStyles` on `transitionend` for correct position while alignment changed

fix vuematerial#1432

marcosmoura added a commit that referenced this issue Jan 26, 2018

fix(MdTabs): correct indicator position while alignment changed (#1442)
`setIndicatorStyles` on `transitionend` for correct position while alignment changed

fix #1432
@zevdg

This comment has been minimized.

Copy link
Contributor Author

zevdg commented Jan 31, 2018

Hmmm, i'm still able to trigger this in a slightly more convoluted way.

I've made a new codepen at https://codepen.io/zevdg/pen/ZrGVYg

If you resize the window down to exactly 600 pixels or less and then maximize the window, you'll see the underline get out of sync again.

More generally, if you resize the window down to exactly 600 pixels or up to exactly 601 pixels, you'll see the strange behavior where the underline doesn't match the tab alignment. If you continue resizing, the underline will "catch up" with the tab alignment on the next fire of the resize event. This makes this bug relatively hard to trigger with manual drag/drop resizes, but fairly easy to trigger with instantaneous window events maximizing or rotating a device screen.

It's very possible that I'm doing something stupid in the way I'm setting up the resize event listener, so please double check my code and let me know if that is the case.

Wanting fixed alignment tabs at mobile widths and non-fixed at tablet/desktop widths seems like a pretty common use case, so if there's a weird trick to setting this up correctly, then maybe it should be added to the docs

@Samuell1 Samuell1 reopened this Feb 1, 2018

@Samuell1 Samuell1 changed the title md-tab underline misplaced when "fixed" alignment is changed after initial render [MdTab] underline misplaced when "fixed" alignment is changed after initial render Feb 1, 2018

VdustR added a commit to VdustR/vue-material that referenced this issue Feb 2, 2018

marcosmoura added a commit that referenced this issue Feb 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.