clientWidth on hidden tabs returns 0

[saykalik]

Part of the mdTabs directive is to check if pagination is needed. This is done by checking if the width of the header tab is wide enough to take on the minimum size a tab header can be. If the tab header is hidden the update pagination (element.parent().prop("clientWidth") return 0. This means the tab assumes pagination and it does not render the tabs correctly (adds pagination and does not fill in the tabs).

Timing is important since when the page first renders it all might look correct but if you hide the tabs then set "selected" on the mdTabs element it will call updatePagination and find get this error.

Workaround I made (which is ugly) in method updatePagination. This allows clientWidth to be correctly read regardless of the visibility of the element.

  var tabsWidth = TAB_MIN_WIDTH * tabsCtrl.count();    // HACK
  if (element.parent().prop('clientWidth') > 0)                    // HACK
    tabsWidth = element.parent().prop('clientWidth') - PAGINATORS_WIDTH;
  var needPagination = tabsWidth && TAB_MIN_WIDTH * tabsCtrl.count() > tabsWidth;

[saykalik]

Not sure if this is the place to put all my findings however I figured I will put it here. Please let me know if there is a better way than this.

I worked this out some more. I found a good article about getting width of a hidden element taking into account a parent might have set it to hidden.
http://blog.strictly-software.com/2009/10/correctly-measuring-element-dimensions.html

The code was a little dated and didn't fit angularjs so I modified it a little and came up with the following:

function getVisibleObj(elem) {
arrEls = []; // holds array of elements we need to make visible to measure X

while (elem && elem !== document) {
    var es = elem.style.display; // method returns current/computed/style value

    if (es == 'none') {
        arrEls.push(elem);
    }

    elem = elem.parentNode;
}
return arrEls; //null;

}

function Swap(elem, els, styles, callback) {

var obj;

for (var x = 0, l = els.length; x < l; x++) {
    // create hash on element to hold old styles so we can revert later
    obj = els[x];
    obj.old = {};

    // Remember the old values, and insert the new ones
    for (var name in styles) {
        obj.old[name] = obj.style[name];
        obj.style[name] = styles[name];
    }
}

// call the function passing in any element that needs scope
callback.call(elem);


for (var x = 0, l = els.length; x < l; x++) {
    obj = els[x];

    // Revert the old values
    for (var name in styles) {
        obj.style[name] = obj.old[name];
    }
    // delete the hash from the element
    try {
        delete obj.old;
    } catch (e) {
        obj.old = null
    }
}

}

function getElementDimensions(el) {

el = (typeof(el) == "string") ? G(el) : el; //return a reference to the element

var w = 0,
    h = 0,
    cw = 0,
    ch = 0,
    ow = 0,
    oh = 0;

// if element is currently hidden we won't be able to get measurements so we need to find out whether this or
// any other parent objects are hiding this element from the flow
var arrEls = getVisibleObj(el); //returns array of objects we need to show to meaure our element

// create function to do the measuring
function getElDim() {

    // get style object
    var els = el.style;

    // get dimensions
     w = el.offsetWidth, h = el.offsetHeight, cw = el.clientWidth, ch = el.clientHeight, ow = el.offsetWidth, oh = el.offsetHeight;

}

// do we need to toggle other objects before getting our dimensions
if (arrEls && arrEls.length > 0) {
    // call function to swap over properties so we can accuratley measure this element
    var styles = {
        visibility: "hidden",
        display: "block"
    };
    Swap(el, arrEls, styles, getElDim);
} else {
    getElDim();
}


// create object
var ret = {
    "width": w, //total width (element+border+padding)
    "height": h,
    "clientWidth": cw, //element+padding
    "clientHeight": ch,
    "offsetWidth": ow,
    "offsetHeight": oh
}

return ret;

}

With the new method that finds dimension of a hidden element calculating the tabswidth can be done as follows:
var tabsWidth = getElementDimensions(element[0]).clientWidth - PAGINATORS_WIDTH;

An interesting side issue is that the ink will not correctly show up for the same reason (hidden element). Using the new method that gets the element dimension you can resolve that issue as well.

Instead of:
var width = selectedElement.prop('offsetWidth');

You end up doing the following:
var width = getElementDimensions(selectedElement[0]).offsetWidth;

[ThomasBurleson]

Closed with Tabs rearchitecture and improvements [in #master] targeted for 0.9.