Having two ion-tabs elements in the same page

[CescZafra]

First of all thank you very much for this plugin. I was going crazy before this one, there are so many options so mixing all of them I was never getting the expected result.

In the project I'm involved now is needed to have two ion-tabs elements on the same page. I need to hide them both also with the header. So I modified a little bit your code (in a dirty way hehe) to detect these situations and use the "subheader logic" but not in subheader, but in top tabs.

Maybe you're asking why I did this, I could put bar-subheader class in ion-tabs directive and thats all. Ok, I don't know why, I don't figured out yet, but if I add this class to my directive the whole content on the tab disappear... So here you have my suggestion.

//since some people can have nested tabs, get the last tabs
            tabs = body.querySelectorAll('.tabs');
            //tabs = tabs[tabs.length - 1];
            //code added
            if (tabs) {
              if (tabs.length>1){
                var topTab, bottomTab;
                //maybe you could find a better way to reverse this array. What I tried to do is start from the end in case you have more tabs, this should take the firsts starting from the end.
                for (var a=tabs.length-1; a>=0; a--){
                  if (tabs[a].parentNode.classList.contains('tabs-top')) {
                    topTab=tabs[a]
                  }
                  if(tabs[a].parentNode.classList.contains('tabs-bottom')){
                    bottomTab=tabs[a]
                  }
                }
                tabs=bottomTab
                hasTabsBottom = true;
              } else {
                //also including the previous code when whe have only one tab
                tabs = tabs[tabs.length - 1];
                tabsHeight = tabs.offsetHeight;
                if (tabs.parentNode.classList.contains('tabs-top')) {
                  hasTabsTop = true;
                  contentTop += tabsHeight;
                } else if (tabs.parentNode.classList.contains('tabs-bottom')) {
                  hasTabsBottom = true;
                }
              }
            }

            //subheader
            //since subheader is going to be nested in the active view, get the closest active view from $element and
            activeView = getParentWithAttr($element[0], 'nav-view', 'active');
            //then here I assume you won't have subheader and a tabs directive doing the subheader job, so, if you don't have one maybe you have the other one.
            subHeader = activeView.querySelector('.bar-subheader') || topTab;
            if (subHeader) {
              subHeaderHeight = subHeader.offsetHeight;
              contentTop += subHeaderHeight;
            }

If you want to add this to your code make it a little bit better please, I did this as a quick fix to my situation, hehe.

cheers and thanks!

[deiucanta]

I confirm - having the same issue