Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

fix(tabs): fix last tab wrapping under tab bar #5711

Closed

Conversation

zakhenry
Copy link

Fixes #5439

@googlebot
Copy link

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.


  • If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
  • If you signed the CLA as a corporation, please let us know the company's name.

@zakhenry
Copy link
Author

^ I signed it!

@googlebot
Copy link

CLAs look good, thanks!

@ThomasBurleson
Copy link
Contributor

@robertmesserle - can you review please ?

@ThomasBurleson ThomasBurleson added the needs: review This PR is waiting on review from the team label Nov 13, 2015
@ThomasBurleson ThomasBurleson modified the milestone: 1.0-rc4 Nov 13, 2015
@robertmesserle
Copy link
Contributor

@ThomasBurleson Yea, this should be fine.

@alexandrebrasil
Copy link
Contributor

Simply adding 1px to the width won't solve it for every situation. For example:

  1. Go here: http://codepen.io/anon/pen/RWJryx
  2. Add 4 tabs with label "LK" (no quotes).
  3. The 4th tab is sent to a new line. If you use Chrome, inspect element, go to md-pagination-element container and add 1px to the width inline style. This resolves the issue and the 4th LK tab is shown again.
  4. Add 3 more "LK" tabs and manually increase the width by 1px again. The 7th LK tab is still hiddeng because it was kept on the next (paging.width < sum(label.width)). If you add 2px instead of 1px, the tab is shown.
  5. If you keep iterating, you'll need to add 3px, 4px and so on...

As far as I can tell, this is happening because the CSS widths of the labels have a fraction, while the element.offsetWidth used to calculate the container width is an integer (so they differ because of rounding/truncation).

See #5794 and PR #5801 for more details.

@zakhenry
Copy link
Author

Closing PR in favour of #5801 as demonstrated by @alexandrebrasil

@zakhenry zakhenry closed this Nov 18, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: review This PR is waiting on review from the team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants