Material: md-pagination-wrapper width is calculated incorrectly when parent container uses flex

[heavysixer]

I've encountered a problem whereby the md-pagination-wrapper is calculated incorrectly when the md-content parent has a flex assigned to it.

I've forked your example to show this defect:

http://codepen.io/anon/pen/RWJryx

I've also attached a screenshot showing how the wrapper forces a tab element to wrap to the next line.

[robertmesserle]

@heavysixer What OS/Browser are you experiencing this in? I am not seeing it in Chrome on Mac.

[robertmesserle]

@heavysixer Ah, I think I finally saw it. Will look into it.

[heavysixer]

@robertmesserle perfect! I am happy to spelunk this with you as well. Please let me know if there is anything I can help you with.

[ciaranj]

Ah, so _this_ is my issue :) .. It only affects you if you have more than 2 tabs, in that scenario the last tab gets wrapped (and hidden) my current workaround is to have an 'extra' tab (in case that helps anyone)

[webmandman]

Thats exactly what I did: .

[zakhenry]

Okay I think I've managed to fix this issue, I can't claim to understand why the fix works - it is likely due to some 1px padding or border causing the width to be calculated incorrect. PR linked above.

[shaman2009]

It seems that adding the following css could fix this.

md-pagination-wrapper {
    width:auto !important;
}

[leventebalogh]

Cool to see this issue here, thanks @heavysixer!
@zzp8164: thanks, it is a bearable workaround until the fix is integrated to mainline.

[mcosand]

I ran into this without using flex.
Digging into it a little, it seems that tabs with subpixel widths are not handled correctly. md-pagination-wrapper sizes itself to the integer part of the tab width, which can be too short. Starting with width=2 may also be insufficient if there are enough tabs.

See the linked pull request for a fix.

[susu]

Thanks @mcosand! I've tested your PR and it works like a charm! Hopefully it will be merged soon.

[susu]

When is @mcosand 's PR will be merged?

[koraytaylan]

this particular one simply took my all night to get around. it was so hard even googling it correctly... I am happy that width: auto !important solves it tho. :weary:

[susu]

Any update on this? Can we help somehow to merge #6737 ? Or are there any problem with it?

[verkestk]

👍 seeing this too - specifically on Chrome 49.0.2623.110 (64-bit) on OSX.

[verkestk]

We see it consistently on OSX chrome when zooming out one stop.

[yanndupuy]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain zyapps.com has exceeded the max emails per hour (496/400 (124%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext2.iad.github.net ([192.30.252.193]:43117 helo=github-smtp2b-ext-cp1-prd.iad.github.net)
by serveur.ex2-p10.com with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256)
(Exim 4.87)
(envelope-from [email protected])
id 1avsbf-001a4R-Mn
for yann.[email protected]; Thu, 28 Apr 2016 22:32:16 +0200
Date: Thu, 28 Apr 2016 13:25:19 -0700
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1461875119;
bh=sXVq8SK6HIwjqIaypWwsQXpuMawt4Rxa0mi1smOk/lM=;
h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=dzDUd/HOcEVCxbpeZJjrQWKJvoKsgf+uxA5VJxDJCtvmvmYCwc9BdL0De42oA5sQ5
TOQJ8DvjvwQZOZLjExmb9eqVe03F0mgrNVMi4v6KstL26MdMzcxm1G9kLA6Fc6OvOz
uNE8kdOViBB01fgdMbOhlJt24P8GuNqxyiunZ2l4=
From: Thomas Burleson [email protected]
Reply-To: angular/material [email protected]
To: angular/material [email protected]
Cc:
Message-ID:
In-Reply-To:
References:
Subject: Re: [angular/material] md-pagination-wrapper width is calculated
incorrectly when parent container uses flex (#5439)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_572271afd230e_5beb3fdb183d12a0453575";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: ThomasBurleson
X-GitHub-Recipient: yanndupuy
List-ID: angular/material
List-Archive: https://github.com/angular/material
List-Post: mailto:[email protected]
List-Unsubscribe: mailto:unsub+000df0dcffd9d5f25d42[e-mail],
https://github.com/notifications/unsubscribe/AA3w3KlcTKmvwYsmR6JUvxRsfu7-8s7Gks5p8RevgaJpZM4GYkHo
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: yann.[email protected]
X-Spam-Status: No, score=1.5
X-Spam-Score: 15
X-Spam-Bar: +
X-Ham-Report: Spam detection software, running on the system "serveur.ex2-p10.com",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root\@localhost for details.

Content preview: Closed #5439. --- You are receiving this because you are subscribed
to this thread. Reply to this email directly or view it on GitHub: https://github.com/angular/material/issues/5439#event-644846755
Closed #5439. [...]

Content analysis details: (1.5 points, 5.0 required)

pts rule name description

---

1.6 HTML_IMAGE_ONLY_12 BODY: HTML: images with 800-1200 bytes of words
0.0 HTML_MESSAGE BODY: HTML included in message
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
X-Spam-Flag: NO

----==_mimepart_572271afd230e_5beb3fdb183d12a0453575
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #5439.

---

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/angular/material/issues/5439#event-644846755
----==_mimepart_572271afd230e_5beb3fdb183d12a0453575
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #5439.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

----==_mimepart_572271afd230e_5beb3fdb183d12a0453575--

[helmut-hoffer-von-ankershoffen]

@ThomasBurleson : why was this closed? Tabs are not really usable at the moment because of this issue.

md-pagination-wrapper {
width:auto !important;
}

is not a workaround if not all tabs can fit onto a screen, cp. https://github.com/angular/material/issues/5794

[SuneRadich]

I too have issues using 1.0.0.rc5. If tabs cant all fit on the screen, the width is calculcated wrong, and the last tab is wrapped - causing the pagination not to work.

Reintroducing the old 'hack' to just add one to the calculated width seems to fix it for me:

function calcTabsWidth(tabs) {
    var width = 0;

    angular.forEach(tabs, function (tab) {
    //-- Uses the larger value between `getBoundingClientRect().width` and `offsetWidth`.  This
    //   prevents `offsetWidth` value from being rounded down and causing wrapping issues, but
    //   also handles scenarios where `getBoundingClientRect()` is inaccurate (ie. tabs inside
    //   of a dialog)
    width += Math.max(tab.offsetWidth, tab.getBoundingClientRect().width) + 1;
});

Edit: I found out that my issue was caused by a custom styling that made the active label bold. And thus making the calculated width off.

[rreitmann]

We are seeing this issue as well (1.1.0-rc.5). When you go to https://metadatamanagement-dev.cfapps.io/#/en/ there should be five tabs. However on Chrome (on Ubuntu) I currently see only three tabs. When I open the developer tools the tabs appear. When you refresh the page while the developer tools are open then there are just three tabs again and you can see that the width of md-pagination-wrapper is too small causing the two missing md-tab-items to be wrapped.

The problem does not exist in version 1.0.9 which you can see here: https://metadatamanagement.cfapps.io/#/en

[WieldSoftwareDevelopement]

I've also implemented the fix mentioned by SuneRadich above. Work's great, thanks.

[gmanriqueUy]

Hi. What happened with this? I'm still facing this issue in 1.1.0.

Is @SuneRadich 's walkaround (edit angular-material source code) the only solution for this?

Thanks.

[WieldSoftwareDevelopement]

1.1.0 resolved this issue for me.

[p-mcgowan]

This still happens in Angular 1.5.8, Material 1.1.1 when tabs have text-transform: uppercase; on them.

[bobsilon]

@p-mcgowan Same here, use zzp8164's solution.

[p-mcgowan]

@bobsilon Thanks, I've been using it but it's not the ideal situation. It also fails for dynamic translated tab names but some hacky css is ok for the time being.

[JacobParis]

The above solution does not work for me when there are enough tabs to require scrolling (ie, on mobile)

md-pagination-wrapper {
width: 999999px !important;
}

Seems to be working though, and appears to be a valid workaround.