Scrollable content in tabs about mobile-angular-ui

[mcasimir]

Why not? I never tried, but it should

[jmaicher]

I tried it, there is one issue: We use HTMLElement.offsetParent to compute the rightHeight of .scrollable. Unfortunately, this method returns null when the element has style.display set to "none" [1], which is the case for .tab-pane's by default.

Moreover, you need to be careful where you put the .scrollable inside of the DOM. Make sure that the parent(s) of .scrollable give it some height to expand to. If the parent of .scrollable has a height of 0, the .scrollable will also have a height of 0 because 1) it has height set to 100% and only the max-height property set to some absolute value and 2) .scrollable-content is absolutely positioned inside .scrollable and therewith does not contribute to the height of its parent.

[1] https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetParent

[mcasimir]

Now i moved the mobile-angular-ui.toggle.toggled event to be fired after the classes are applied to toggleables. So, since scrollables height are recomputed on each window resize you can try something like this for now:

$rootScope.$on("mobile-angular-ui.toggle.toggled", function(e, id, active){
    var elem = angular.element(document.getElementById(id));
    if( elem.hasClass("tab-pane") && active){
      window.dispatchEvent(new Event('resize'));
    }
});

I'm uncertain about providing a public method to recompute scrollables height. It seems more of an internal stuff.

Thank you