IE Edge flex box tabs layout

ionic-v1
#1

Hi guys,

Just noticed that on IE Edge the tab bar doesn’t render correctly. It works fine in IE 10 but on the Edge they’re positioned on the right side of the page, as you can see on the screenshot below

image
ie.png1913×1079 128 KB

Any idea on how to solve this ? I’ve been fiddling around but the IE inspector is to dye for…

#2

Had to write a small directive to apply a class to the tabs. I noticed I only have this issue if I have less than 3 tabs and according to a bug reported on github it can by “fixed” (looks awful but does the job in lack of a better solution) by applying

.tab-nav.tabs {
    justify-content: flex-start;
}

My directive

(function(){
    'use strict';

    angular
	.module('ieHack',[])
	.directive('ieHack',ieHack);

    ieHack.$inject = ['$window'];

    function ieHack($window){
	return {
	    restrict: 'A',
            link: link
	};
    
	function link(scope,element,attrs) {
		
	   //HACK: Add class to fix bug on IE11 with flexbox positioning
	   //Reported to the ionic team here: https://github.com/driftyco/ionic/issues/3975
		
           if(!!$window.MSInputMethodContext){
            $window.document.querySelectorAll('.tab-nav')[0].style.justifyContent = 'flex-start';
		}                       
	}
}
})();

If someone has a better idea, let me know. As for know, this does the job on IE11

#3

Another half-solution is to set the tab-item 's max-width to a 100%.
This aligned the items to the center, but they had a bigger than expected distance between each other.

#4

I use this Hack

// IE11 Hack - aligns items on the tabs bar
.platform-browser.platform-win32 {
  .tabs {
    padding-left: 15%;
    padding-right: 15%;

    .tab-item {
          max-width: 100%;
        }
  }
}