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

fix(tabs): min-width not respected on IE11 #11432

Merged
merged 1 commit into from
Nov 15, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 3 additions & 30 deletions src/components/tabs/js/tabsController.js
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
// Fix double-negative which can happen with RTL support
newValue = newValue.replace('--', '');

angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate3d(' + newValue + ', 0, 0)');
angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate(' + newValue + ', 0)');
$scope.$broadcast('$mdTabsPaginationChanged');
}

Expand Down Expand Up @@ -620,14 +620,6 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
ctrl.shouldPaginate = shouldPaginate();
}

/**
* Calculates the width of the pagination wrapper by summing the widths of the dummy tabs.
* @returns {number} the width of the pagination wrapper in pixels
*/
function calcPagingWidth () {
return calcTabsWidth(getElements().tabs);
}

/**
* @param {Array<HTMLElement>} tabs tab item elements for use in computing total width
* @returns {number} the width of the tabs in the specified array in pixels
Expand All @@ -647,9 +639,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
}

/**
* @returns {number} either the max width as constrained by the container or the max width from an
* old version of the Material Design spec.
* TODO update max tab width to equal the spec in 1.2.
* @returns {number} either the max width as constrained by the container or the max width from
* the 2017 version of the Material Design spec.
*/
function getMaxTabWidth() {
var elements = getElements(),
Expand All @@ -663,24 +654,6 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
return Math.max(0, Math.min(containerWidth - 1, specMax));
}

/**
* @returns {number} the min width from an old version of the Material Design spec. This returns
* a larger min width if the container width is larger than 600px.
* TODO update min tab width to equal the spec in 1.2.
*/
function getMinTabWidth() {
var elements = getElements(),
containerWidth = elements.canvas.clientWidth,
xsBreakpoint = 600,

// See https://material.io/archive/guidelines/components/tabs.html#tabs-specs
specMin = containerWidth > xsBreakpoint ? 160 : 72;

// Do the spec minimum, or the canvas width; whichever is *smaller* (tabs larger than the canvas
// width can break the pagination) but not less than 0
return Math.max(0, Math.min(containerWidth - 1, specMin));
}

/**
* Re-orders the tabs and updates the selected and focus indexes to their new positions.
* This is triggered by `tabDirective.js` when the user's tabs have been re-ordered.
Expand Down
11 changes: 6 additions & 5 deletions src/components/tabs/tabs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ md-tabs-wrapper {
display: block;
position: relative;
// transform is needed for iOS Safari to prevent content from disappearing on scroll
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
md-prev-button, md-next-button {
height: 100%;
width: $tabs-paginator-width;
Expand All @@ -103,7 +103,7 @@ md-tabs-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
transform: translate(-50%, -50%);
}

// For RTL tabs, rotate the buttons
Expand All @@ -121,7 +121,7 @@ md-tabs-wrapper {

// In regular mode, we need to flip the chevron icon to point the other way
md-icon {
transform: translate3d(-50%, -50%, 0) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
}
&.md-stretch-tabs {
Expand Down Expand Up @@ -166,8 +166,9 @@ md-pagination-wrapper {
display: flex;
transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
position: absolute;
width: 999999px;
@include rtl-prop(left, right, 0, auto);
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
&.md-center-tabs {
position: relative;
justify-content: center;
Expand All @@ -194,7 +195,7 @@ md-tab-content {
transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
overflow: auto;
// transform is needed for iOS Safari to prevent content from disappearing on scroll
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
&.md-no-scroll {
bottom: auto;
overflow: hidden;
Expand Down