md-tabs displaying empty 200px div when no content

[hodeyp]

When using the md-tabs with no content there is still a 200pc container below the tabs. Looking at the source code it looks as if ng-if="$mdTabsCtrl.hasContent" is always returning true even if there is no content.

[kschwidder]

in the docs it is stated that if you set the label attribute for a md-tab than hasContent is assumed (=== true). If you add the new md-tab-label tag within the md-tab than hasContent is false if no specific tab content tag is defined. I had to rewrite the tabs within our application from label to md-tab-label.

[robertmesserle]

This is a valid bug if this is still happening in master. The original logic was based on whether or not a label attribute was being used; however, for the sake of simplicity, it would be nice to support empty content in this case as well.

[hodeyp]

this is still happening in master

[nkoterba]

@robertmesserle So we are using the <md-tabs> control simply to display tabs (no content) that alter 'states' in our app.

However, the current logic for updateHasContent, currently just checks to see if the tab's template exists.

/**
   * Determines if the tab content area is needed.
   */
  function updateHasContent () {
    var hasContent  = false;
    angular.forEach(ctrl.tabs, function (tab) {
      if (tab.template) hasContent = true;
    });
    ctrl.hasContent = hasContent;
  }

Unfortunately, developers may not realize that whitespace/return line counts as HTML content and will cause the 200px 'content' area to appear.

For example, this html:

        <md-tabs md-selected="vm.selectedTabIndex">
                <md-tab ng-repeat="tab in ::vm.tabs" md-on-select="vm.selectTab(tab)"
                        label="{{::tab.title}}">
                </md-tab>
        </md-tabs>

Will cause the "content" area to appear since between the start and end tags of <md-tab> there is content, it just happens to be whitespace.

This "situation" was occurring on 4111c93, as of August 10, 2015.

The solution, of course, is to ensure no space between <md-tab> and </md-tab>:

        <md-tabs md-selected="vm.selectedTabIndex">
                <md-tab ng-repeat="tab in ::vm.tabs" md-on-select="vm.selectTab(tab)"
                        label="{{::tab.title}}"></md-tab>
        </md-tabs>

Just wondering if it isn't better instead to check for non-whitespace tab template?

[nkoterba]

Just ran into another issue. I'm trying again to use <md-tabs> as only a tab display "header" (meaning I don't plan to put any content ever inside the tabs).

However, i need to customize the <md-tab-label>.

Here is the code:

<md-tabs flex class="md-hue-2 tabControl" md-no-bar md-no-ink
         md-selected="vm.selectedTabIndex">
        <md-tab ng-repeat="tab in vm.tabs">
                <md-tab-label layout="row" layout-align="center center">
                        <span class="tabTitle">{{tab.title}}</span>
                        <md-icon class="tabCloseButton" md-svg-src="action:highlight_off"
                                 ng-click="vm.removeTab(tab)"></md-icon>
                </md-tab-label></md-tab>
</md-tabs>

However, although <md-tab> only contains the <md-tab-label>, the code to check for hasContent is again returning true b/c it is finding whitespace between the start and end tags of <md-tab>.

It really looks like the updateHasContent function should check for actual non-whitespace content.

This can, again, be resolved, by making sure there are is no whitespace. Updating the HTML above to have <md-tab-label> start immediately after the opening <md-tab> fixes this issue:

<md-tabs flex class="md-hue-2 tabControl" md-no-bar md-no-ink
         md-selected="vm.selectedTabIndex">
        <md-tab ng-repeat="tab in vm.tabs"><md-tab-label layout="row" layout-align="center center">
                        <span class="tabTitle">{{tab.title}}</span>
                        <md-icon class="tabCloseButton" md-svg-src="action:highlight_off"
                                 ng-click="vm.removeTab(tab)"></md-icon>
                </md-tab-label></md-tab>
</md-tabs>

[jpike88]

Please open this issue, as it's not immediately obvious that md-tabs needs to have zero characters, having a newline and spaces can be the equivalent of no content.

Maybe a warning is appropriate, as the only reason I found the workaround is by chasing down this issue.

[ganySA]

+1 on this. I just experienced it!
Maybe a comment in the documentation would be good for now?