Determining Angular UI modal height programmatically

Question

In this plunk I have an Angular UI modal with an alert popup that should display the modal height. Instead, it shows an empty variable. Where's the error?

HTML

 <div the-modal></div>

Javascript

var app = angular.module("app", ['ui.bootstrap']);

app.controller("ctl", function($scope, $compile) {});


app.directive("theModal", function($uibModal, $timeout) {
  return {
    restrict: "AE",
    scope: true,
    link: function(scope, element, attrs, ctrl, transclude) {

        scope.instance = $uibModal.open({
          animation: false,
          scope: scope,
          template: 'Some Text',
          appendTo: element
        });

        $timeout(function(){
          alert("Modal height is: " + element.css("height"));
        },500);

    }
  }
});

element.css is used for setting CSS properties to your element, not getting — Zooly
– Zooly, Commented Dec 1, 2017 at 15:23

Pankaj Parkar · Accepted Answer · 2017-12-01 15:37:27Z

2

The content has been placed inside div with modal-dialog class inside directive modal placeholder element. So ideally you should be looking at element's inner modal-content class.

element[0].querySelector('.modal-dialog').offsetHeight

answered Dec 1, 2017 at 15:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Determining Angular UI modal height programmatically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related