javascript - AngularJS resize container -

i have issue application. trying build metro style web app , far have used bit of sass make bootstrap horizontal:

@import "variables"; @import "mixins";  // --- // metro. // ---  @include screen-md {     .metro {         height: 100%;          .container-fluid {             width: 10000px;             padding: 0 100px;             position: absolute;             top: 130px;             bottom: 0;             left: 0;              .row-title {                 position: absolute;                 height: 100px;             }              > .row,             .invisible-container > .row {                 position: relative;                 float: left;                 height: 780px;                  padding: 0 15px 30px 15px;                 margin-right: 50px;                  @include make-tiles($tile-width);                  &:last-child {                     margin-right: 0;                 }             }         }     }      .flex-column {         display: -webkit-box; /* safari */         display: flex;          -ms-flex-wrap: wrap;         -webkit-flex-wrap: wrap;         flex-wrap: wrap;          -ms-flex-direction: column;         -webkit-flex-direction: column;         flex-direction: column;     } } 

as can see, set width of .container-fluid 10000px. can't find css way make automatically expand. tried create directive me:

.directive('containerfluid', ['$window', '$timeout', '$document', '$http', function ($window, $timeout, $document, $http) {      var getchildrenwidths = function (children) {          // define our width         var width = 0;          // if have children         if (children && children.length) {              // each child             (var = 0; < children.length; i++) {                  // our child                 var child = children[i];                  // if not button                 if (!angular.element(child).hasclass('back')) {                      // increase our width child width                     width += child.offsetwidth;                 }             }         }          // return our width         return width;     };      var resize = function (element, width) {          // our document         var body = angular.element($document[0].body)          // if our window width less 992         if (width < 992) {              // set our container width 100%             element.css('width', '100%');          // otherwise, if large 992         } else {              // reset our css widths calulated             element.css('width', '10000px');             body.css('overflow-x', 'hidden');              // our last childs length             var style = window.getcomputedstyle(element[0]),                 paddingright = parsefloat(style.paddingright),                 children = element.children(),                 lastchild = children[children.length - 1],                 data = lastchild.getboundingclientrect(),                 containerwidth = data.right + paddingright;              //console.log(paddingright);             //console.log(lastchild);             //console.log(data);             //console.log(containerwidth);              // set our container width             element.css('width', getchildrenwidths(children) + 'px');             body.css('overflow-x', 'visible');         }     };      return {         restrict: 'c',         link: function (scope, element) {              // our window             var window = angular.element($window),             width = $window.innerwidth;              // bind resize function             window.bind('resize', function () {                  // after half second                 $timeout(function () {                      // window width                     width = $window.innerwidth;                      // resize our container                     resize(element, width);                  }, 1000);             });              // watch children changes             scope.$watch(function () {                  // if there changes children                 return $http.pendingrequests.length;              // execute if change             }, function (length) {                  // if have no pending requests                 if (length === 0) {                      // after half second                     $timeout(function () {                          // resize our container                         resize(element, width);                     }, 500);                 }             });         }     } }]) 

there 2 ways can execute bit of code, 1 of them uses getchildwidths function calculates overall width adding child widths togeter. there getboundingrect method allows me last child , it's right position , add container padding-right value.

if there no http requests, both methods work find. problem is, there http requests , once have executed populated within children of container. have tried add watch on http requests length , execute directive once there no requests left, doesn't work because takes time populate children. refrain using timeouts exceed 500 milliseconds because user having wait not thing.

does know how can solve problem?