This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
md-tabs: scroll not working depending on md-tab-item width #5794
Comments
Forgot to mention: I was able to circumvent this bug by changing the updatePagingWidth() function with the following code: function updatePagingWidth() {
var width = 1;
// Adding 1 to offsetWidth to circumvent the scrolling bug
angular.forEach(getElements().dummies, function (element) { width += element.offsetWidth + 1; });
angular.element(elements.paging).css('width', width + 'px');
} Unfortunatelly I don't have access to commit in github from behind my company's firewall, so I can't make a repository clone to run the tests and send a pull request right now. I'll try and do it from home later. |
alexandrebrasil
added a commit
to alexandrebrasil/material
that referenced
this issue
Nov 18, 2015
When the md-tab-label CSS width is calculated to a fraction numbem, its value and element.offsetWidth don't match. When the paging container's width is calculated, depending on how the offsetWidth of each label is truncated/rounded, the resulting width is smaller then the actual sum of all labels, and that breaks the line and forces the last label to go to next line, and its offsetLeft to be zero. That behaviour disables the next page button, causing the pagination to not work. The new width calculation adds 1px to the offsetWidth to account for rounding/truncating errors, resulting in a slightly bigger paging container. Fixes angular#5794.
I didn't find it before, but this is a duplicate for #5439. |
This was referenced Nov 18, 2015
Commit a242a5f has brought this problem back. Using Math.ceil won't solve the problem because |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
When creating an md-tab with enough tabs to make scrolling necessary, the scrolling button gets disabled sometimes. From what I could check, the button gets enabled/disabled depending on the position of the last tab (function canPageForward() of tabsController). The problem seems to be caused by the last md-tab-item being pushed to a new line (see image below), making its offset to be smaller than the end of the controller.
This problem seems to be created by the fixed "width" style being set in the md-tabs-canvas block being smaller than the sum of the tabs' width (by updatePagingWidth() function in tabsController). From what I could see, this is caused by element.offsetWidth being an integer, while the tabs' width being a floating point (see image below). When the container width become the sum of the element.offsetWidth of the tabs, the rounding error (when the tab width fraction is < 0.5) makes the container width becomes smaller than the tabs.
I was able to replicate this bug consistently using the following snippet rendered with Roboto font:
The text was updated successfully, but these errors were encountered: