Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

clientWidth on hidden tabs returns 0 #578

Closed
@saykalik

Description

@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;

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions