Tabs not showing on page load

[vrsotto]

hi @mikejacobson

I like this plug and using it on angularjs(1.x). prob is that not showing tabs on first page load only the arrows are visible (desktop view) or need to resize the window to make entire tabs working.

i think, something function(s) not triggering on page load.

	<div class="row portlet-title tabbable-line margin-n-lr-15" scrolling-tabs-wrapper>
		<!-- Standard Bootstrap ul.nav-tabs -->
		<ul class="nav nav-tabs" role="tablist">
			<li ng-class="{ 'active': tab.active, }" ng-repeat="tab in vm.tabsContent">
				<a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.title}}</a>
			</li>
		</ul>
	</div>

	<div class="portlet-body">
		<!-- Tab panes -->
		<div class="tab-content tab-ep-contents">
			<div id="{{tab.paneId}}" class="tab-pane" ng-class="{ 'active': tab.active }" ng-repeat="tab in vm.tabsContent">
				<div ng-include="'app/components/client/profile/tabcontent/' + tab.content"></div>
			</div>
		</div>
	</div>
</div>

i hope you'll still availe to help w/ this issue

Thanks

[mikejacobson]

If you could put together a plunk or something that demonstrates the issue, it would help me troubleshoot. Looking at your markup, it looks pretty straightforward and matches what's in the working plunks.

You could maybe try adding the watch-tabs attribute if it's an issue with a delay in the tabs data loading.

You could also programmatically force a refresh of the tabs sometime after page load if you have a sense of when the tabs data should be loaded and the tabs rendered.

[vrsotto]

@mikejacobson i don't think its possible coz its on my local dev and tab contents ('tab.content') are dynamic templates containing DB data. -- already tried watch-tabs and force a refresh (<div scrolling-tabs-wrapper refresh-on="vm.triggerRefresh">). screencap http://tinyurl.com/y5odmet6 on load and this http://tinyurl.com/yyctw55t working when resizing the browser (chrome)

[vrsotto]

@mikejacobson i did

.scrtabs-tabs-fixed-container, .scrtabs-tabs-movable-container {
	width: auto!important;
} 

just to show tabs on load.

[mikejacobson]

Did that css update fix the issue?

If the tabs data is being loaded asynchronously from an http request outside of the angular digest cycle, you'll need to call scope.$apply() after the list is populated to have the watch-tabs watcher see the change.

[vrsotto]

Did that css update fix the issue?

If the tabs data is being loaded asynchronously from an http request outside of the angular digest cycle, you'll need to call scope.$apply() after the list is populated to have the watch-tabs watcher see the change.

CSS no. will try, your scope.$apply() suggestion. i'm bit new to angularjs, if its ok can you please show how to use scope.$apply() with my data (from vm.tabsContent)?

[mikejacobson]

Here's a plunk showing how you might implement it. MainController.js has a setTimeout that simulates an xhr, then calls scope.$apply() after the data is set to trigger a digest cycle to update the UI.

[vrsotto]

Here's a plunk showing how you might implement it. MainController.js has a setTimeout that simulates an xhr, then calls scope.$apply() after the data is set to trigger a digest cycle to update the UI.

still confuse, in my main cotroller i have something like:

vm.init = (function(){
   ...
   ...
   initTabsets();
})();

"vm.tabsContent" was renamed to vm.tabsets. those named templates *html are dynamic.

function initTabsets() {
   vm.tabsets = [
      { active: vm.client.timesheetEnabled, title: 'Timesheet', content: 'timesheet.html'},
      { active: true, title: 'Managers', content: 'managers.html'},
      { active: vm.client.onboardingEnabled, title: 'Onboarding Packages', content: 'onboarding.html'},
      { active: true, title: 'Integrations', content: 'integrations.html'},
      { active: true, title: 'Award / Rate', content: 'award-rate.html'},
  ];

  var _active = $filter('filter')(vm.tabsets, { active: true})[0];
  vm.tab_index = vm.tabsets.indexOf(_active) + 1;
  vm.tab_selected = vm.tab_index;
  $scope.$apply();
}

adding $scope.apply at the bottom not working.

[vrsotto]

@mikejacobson also, when I do watch-tabs="vm.tabsets" i will received

TypeError: Cannot read property 'length' of undefined at scrolling-tabs.js:958

[mikejacobson]

The Cannot read property 'length' of undefined error is probably occurring because vm.tabsets has not been initialized yet when the directive is loading. You'd need to initialize it to an empty array right from the start, then you can reassign it to point to your dataset when the data becomes available.

Here's a plunk that I think might simulate your situation. In MainController.js, you'll see that I initialize vm.tabsets to an empty array so the directive can initialize itself and configure the watch on vm.tabsets, then after a timeout to simulate an http request, I set vm.tabsets to point to the tabs data, then call scope.$apply() to trigger an angular digest cycle (otherwise angular won't know anything changed because the setTimeout callback occurs outside the angular lifecycle).