Question posted in 
Hi, I really was trying to understand why my initial modal step fails to initialize at the right height. My angular directive for setting the parent containing div to the right height does not work on the first modal step. Why? Also, I am using external files and feel that the following plunker link is a better demo of this problem. Basically, I am using a bootstrap modal and inserting a ui-view whose route is controlled by ui-router. No big deal, but the parent containing height collapses so I am using jquery to set the height of the containing div so the footer moves down appropriately. It fails to work on the first modal step and I am at a loss for what else to do.
https://plnkr.co/edit/qpFfckmh8ExbRlqzROhM?p=preview
var app = angular.module("app", ["ui.router"]);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("step1", {
url: "/step1",
templateUrl: "step1.html"
})
.state("step2", {
url: "/step2",
templateUrl: "step2.html"
})
.state("step3", {
url: "/step3",
templateUrl: "step3.html"
});
$urlRouterProvider.otherwise('/');
})
app.controller("appController", ["$scope", "$location", function($scope, $location) {
$scope.clickJoin = function($state) {
$location.path("step1");
showHidePrevNextBtns();
}
$scope.clickNext = function($state) {
if($location.path() === "/step2") {
$location.path("step3");
}
if($location.path() === "/step1") {
$location.path("step2");
}
showHidePrevNextBtns();
};
$scope.clickPrevious = function($state) {
if($location.path() === "/step2") {
$location.path("step1");
}
if($location.path() === "/step3") {
$location.path("step2");
}
showHidePrevNextBtns();
};
function showHidePrevNextBtns() {
if($location.path() === "/step2" || $location.path() === "/step3") $scope.previousBtn = true;
else $scope.previousBtn = false;
if($location.path() === "/step1" || $location.path() === "/step2") $scope.nextBtn = true;
else $scope.nextBtn = false;
}
}]);
app.directive("banner", function() {
return function (scope, element, attrs) {
$(element).parent().height($(element).height());
}
});/* Styles go here */
.modal-container {
position: relative;
}
.modal-step {
position: absolute;
width: 100%;
}
#status-buttons div {
color:#FFF;
display:inline-block;
font-size:12px;
margin-right:10px;
text-transform:uppercase;
}
#status-buttons span{
color:#000000;
display:inline-block;
font-size:12px;
margin-right:10px;
text-transform:uppercase;
background:#ffffff; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px;
border-radius:50%;
}
#status-buttons span.active {
background-color:#C32026;
color: #ffffff;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="app.css" rel="stylesheet">
</head>
<body ng-app="app" ng-controller="appController">
<div class="container">
<h2>Modal Example</h2>
<div class="btn-group dropdown">
<button class="btn" data-toggle="modal" data-target="#joinModal" ng-click="clickJoin()"><i class="fa fa-thumbs-up"></i>Join</button>
</div>
<!-- Modal -->
<div class="modal fade" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title italic" id="myModalLabel">Become a Member Today!</h4>
</div>
<!-- NAVIGATION -->
<div class="page-header text-center" >
<h2>Step</h2>
<div id="status-buttons">
<div><span >1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
</div>
</div>
<div class="modal-body" style="border: red solid 1px">
<div class="modal-container" style="border: blue solid 1px;">
<div class="modal-step" banner ui-view style="border: black solid 1px"></div>
</div>
</div>
<br />
<br />
<br />
<div class="modal-footer">
<div class="col-xs-2">
<button type="button" id="previousBtn" ng-show="previousBtn" class="btn btn-sm btn-default" ng-click="clickPrevious()"><i class="fa fa-arrow-left"></i> Previous</button>
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-2">
<button type="button" id="nextBtn" ng-show="nextBtn" class="btn btn-sm btn-default" ng-click="clickNext()">Next <i class="fa fa-arrow-right"></i></button>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-3">
<button type="button" id="submitBtn" class="btn btn-sm btn-default" ng-click="clickSubmit()">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="app.js"></script>
</body>
</html>
2
Answers
https://plnkr.co/edit/zZnojKCaeeiTUb42FW5I?p=preview
Adding this css to your modal body will fix the issue.