Fixed nav justified tab issue on window resize

digicorp · Mar 17, 2017 · 8ba257a · 8ba257a
1 parent 70241bb
commit 8ba257a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/components/tab/css/tab.css b/components/tab/css/tab.css
@@ -10,8 +10,8 @@
 .pmd-tabs-scroll-container {display: block; width: 100%; height: 48px; position: relative; overflow: hidden;}
 .pmd-tabs-scroll-right {float: right; right:0; top:0;}
 .pmd-tabs-scroll-left {float: left; left:0;}
-.pmd-tabs-scroll-right, .pmd-tabs-scroll-left{ position:absolute; z-index:99; text-align: center;	cursor: pointer; display: none; white-space: no-wrap; vertical-align: middle; padding:12px 24px 8px 24px; background-color:#4285f4; color:#fff;}
-.pmd-tabs .pmd-tab-active-bar { position: absolute; bottom: 0; width: 25%; height: 3px; background: #CC0; ransition: all .3s ease-in-out;}
+.pmd-tabs-scroll-right, .pmd-tabs-scroll-left{ position:absolute; z-index:99; text-align: center; cursor: pointer; display: none; white-space: no-wrap; vertical-align: middle; padding:12px 24px 8px 24px; background-color:#4285f4; color:#fff;}
+.pmd-tabs .pmd-tab-active-bar { position: absolute; bottom: 0; width: 25%; height: 3px; background: #CC0;}
 .pmd-tabs .nav-tabs.nav-justified > li > a { border:none;  border-radius:0;}
 .pmd-tabs .nav-tabs.nav-justified > .active > a,
 .pmd-tabs .nav-tabs.nav-justified > .active > a:hover,
@@ -30,7 +30,6 @@
 .pmd-tabs .nav > li > a:hover, 
 .pmd-tabs .nav > li > a:focus { background-color: transparent; border-color: transparent;}
 .pmd-tabs .nav > li > a { padding: 18px 24px 17px; font-size:14px;}
-.pmd-tabs .nav > li > a:hover, .pmd-tabs .nav > li > a:focus{}
 .nav-tabs > li > a { opacity:0.54; color:#000; font-weight:500;}
 .pmd-tabs-bg{ background-color:#4285f4; color:#fff;}
 .pmd-tabs-bg li .dropdown-menu a {color:#333;}
@@ -39,5 +38,4 @@
 .pmd-tabs-bg .pmd-tabs-scroll-container{background-color:#4285f4; color:#fff;}
 @media (max-width: 767px) {
 .pmd-tabs{ overflow-x: auto; overflow-y: hidden;}
-.pmd-tabs .nav-tabs.nav-justified{ width: auto !important;}
 }
diff --git a/components/tab/js/tab-scrollable.js b/components/tab/js/tab-scrollable.js
@@ -21,9 +21,12 @@
 				});
 				return itemsWidth;
 			};
-
 			var appendulwidth = function(){
-				$this.find('ul.nav-tabs').width(widthOfList())
+				if($this.find('ul.nav-tabs').hasClass("nav-justified")){
+					$this.find('ul.nav-tabs').width("100%")
+				}else {
+					$this.find('ul.nav-tabs').width(widthOfList())
+				}
 			};
 
 			var getLeftPosi = function(){