offsetWidth and offsetHeight return 0 always

ionic-v1
1

I have an image loading within a div container and I need to know the offsetwidth & offsetheight after the image is loaded to add certain CSS classes.

I have added a timeout and even added this code within a $loaded callback (which comes from firebase) and the div always returns 0. It even returns 0 even if I add inline css. This shouldn’t be correct should it. Can someone let me know what I am doing wrong.

HTML

      <div class="image-holder-new" id="image-holder-new">

        <img ng-src="{{imgPostUrl}}" id="image-height" alt="">
        <div class="tags {{item.style}}" ng-repeat="(description, item) in tags"
             style="top: {{(containerHeight * item.positionY) / orgContainerHeight}}px;left: {{(containerWidth * item.positionX) / orgContainerWidth}}px;">
          <div class="tag-brand fadeBrandTag" ng-if="tagShow">
            {{::item.itemDescription.join(', ')}}
          </div>
          <div class="tag-pin fade" ng-if="tagShow"></div>
        </div>
      </div>

Controller

 var picture = $firebaseArray(ref);
  picture.$loaded().then(function (picture) {
    $scope.post = picture.$getRecord(id);
    $scope.imgPostUrl = 'data:image/jpeg;base64,' + $scope.post.image;
    $scope.imageHasLoaded = true;
    $scope.tags = $scope.post.tags;
    $scope.user = User.getUserData($scope.post.user);
    ShareData.saveImageTitle($scope.post.itemTitle);
    $scope.navTitle = ShareData.retrieveImageData().imageTitle;

    if($scope.imageHasLoaded){
      $scope.containerWidth = document.getElementById('image-holder-new').offsetWidth;
      $scope.containerHeight = document.getElementById('image-holder-new').offsetHeight;
      $scope.orgContainerWidth = $scope.post.origWidth;
      $scope.orgContainerHeight = $scope.post.origHeight;
      console.log('image holder width' + ' ' + $scope.containerWidth);
      console.log('image holder height' + ' ' + $scope.containerHeight);
      console.log('original holder width' + ' ' + $scope.orgContainerWidth);
      console.log('original holder height' + ' ' + $scope.orgContainerHeight);
    }
  }).catch(function (error) {
    console.log('Error:', error);
  });
2 Likes