AngularJS height of tabs when visible before being tabs

AngularJS height of tabs when visible before being tabs

I have got a very strange problem.

I am new to angularjs but quite familiar with jquery.

I do program a frontend in ANgularjs, which is planned to be a singlepageApp, never to be reloaded.

I think the problem is located in Jquery or even in html itself.

The UI-Core of the page is angularui's 'Tabs'. which means these Tabs are always visible in the same size. I only want one div to get scrollbars, which is div.tab-pane. This is important for the <ul> and the <li> elemets to be always there to navigate.

The reason for not wanting more then one scrollbar is selfexplaining, imho.

Of course I do not want it only on Init but also, when the Window is resized.

To get this I did a workaround, to get all elements on 100% height concerning the innerheight of the parent element. thats my code:
index.html:

  1.     <body ng-app="myApp" ng-controller="InitCtrl">
  2.     <div  ng-include="'views/main.html'" class="mainview"  resize  ></div>
  3.     <div class="footer">my footer text, which is necessary</div>
  4.     </body>
(reduced to the main things)

the directive "resize" is defined as

  1.     .directive('resize', function ($window, FullSizeElement) {
  2.         
  3.         return function (scope, element, attr) {
  4.     
  5.             var w = angular.element($window);
  6.             scope.$watch(function () {
  7.                 return {
  8.                     'h': w.height()
  9.                 };
  10.             }, function () {
  11.                 FullSizeElement.size(element);
  12.             }, true);
  13.     
  14.             w.bind('load', function () {
  15.                 scope.$apply();
  16.             });
  17.             w.bind('resize', function () {
  18.                 scope.$apply();
  19.             });
  20.         };
  21.     })

and the factory FullSizeElement is defined


  1.     .factory('FullSizeElement', function() {
  2.         
  3.         
  4.         function sizeHelper(el, sub){
  5.             el.height(
  6.                     el.parent().height()
  7.                     -el.outerHeight(true)
  8.                     +el.height()
  9.                     -sub
  10.                     -prev_siblings_height_helper (el)
  11.                 )
  12.         };
  13.         function prev_siblings_height_helper (el){
  14.             var returnheight = 0;
  15.             el.prevAll().each(function(data){
  16.                 if($(this).is(":visible")){
  17.                     console.log('returnheight', el, this, $(this).outerHeight(true))
  18.                     returnheight += $(this).outerHeight(true)
  19.                 }
  20.             });
  21.             console.log('returnheight',returnheight, el)  ;
  22.             return returnheight;
  23.         };
  24.         return {
  25.             size : function (element){
  26.                 console.log('size(element)');
  27.                 var body = $('body');
  28.                if (element.hasClass('mainview')) sizeHelper(element, body.find('.footer').outerHeight());
  29.                else sizeHelper(element, 0);
  30.                 element.find('div.tab-pane:visible, div.ng-isolate-scope:visible,div.tab-content:visible').each(function(index, el){
  31.                     sizeHelper($(el),0);
  32.                 });
  33.             }
  34.         };
  35.     });

The main.html is


  1.       <tabset>
  2.         <tab>
  3.             <tab-heading>
  4.                 <i class="glyphicon glyphicon-home"></i>
  5.             </tab-heading>
  6.                
  7.         </tab>
  8.         <tab>
  9.             <tab-heading>
  10.                 <i class="glyphicon glyphicon-folder-open" tooltip-placement="bottom" tooltip-animation="false" tooltip="Akten"></i>
  11.             </tab-heading>
  12.         </tab>
  13.         <tab>
  14.             <tab-heading>
  15.                 <i class="glyphicon glyphicon-home"></i>
  16.             </tab-heading>
  17.         </tab>
  18.         <tab>
  19.             <tab-heading>
  20.                 <i class="glyphicon glyphicon-credit-card" tooltip-placement="bottom" tooltip-animation="false" tooltip="Kontakte"></i>
  21.             </tab-heading>
  22.             Kontakte
  23.         </tab>
  24.         <tab>
  25.             <tab-heading>
  26.                 <i class="glyphicon glyphicon-euro" tooltip-placement="bottom" tooltip-animation="false" tooltip="FiBu global"></i>
  27.             </tab-heading>
  28.             FiBu
  29.         </tab>
  30.         <tab>
  31.             <tab-heading>
  32.                 <i class="glyphicon glyphicon-wrench" tooltip-placement="bottom" tooltip-animation="false" tooltip="Einstellungen"></i>
  33.             </tab-heading>
  34.             some text, may be veray long
  35.     
  36.         </tab>
  37.       </tabset>

On resizing the window it works perfectly, even if I fire the event manually. On loading the window it works, when the window is not focussed (chosing another tab in firefox an let 'grunt serve' reload the page).

The problem is reloading or simply loading the page, when it is focussed / visible. In this case, the <ul> element is calculated to be 240px high, which is in fact not correct, after tabs are initiated. But when it loads without beeing visible, the height of <ul> is calculated with 42px, which is correct.

I assume 240 to be the height of the <ul>, like it is without being formatted as tabs. But I have no clue, why it works, when nobody can watch it.

One thing more: when visible, firebug notifys `GET http://localhost:9000/views/main.html`, which is of course correct. But when unvisible, it does not, although it is loaded (and used).

Any Ideas?


    • Topic Participants

    • kv