I have been busy creating a modal, and I wanted to share the HTML code with you. Take a look at the style tag, where I am customizing the .modal-content CSS class and .modal-dialog CSS class.
<script type="text/ng-template" id="Data.html">
<style>
.modal-content {
width: 100%;
height: 100%;
overflow-y: auto;
margin: 120px 0px 0px 0px;
}
.modal-dialog {
height: 70%;
}
</style>
<div ng-show="Userinfo">
</div>
<div ng-show="!Userinfo">
</div>
Within the code, there are 2 div sections connected to $scope.Userinfo. I'm using Angular's ng-show to toggle the visibility of these divs. The first div contains minimal content, so I don't want to apply the above styles to it. However, the second div is packed with content. Therefore, when the second div is displayed, I need the specified styles to be applied to it.
Is there a way to dynamically assign the above style to the second div only? Currently, both divs inherit the same styling, causing the first div to appear excessively large unnecessarily.