Currently, I am in the process of developing an application that utilizes Ui bootstrap to seamlessly integrate various Bootstrap components with AngularJs. One of the key features I require is a modal panel, however, I found that the default size option 'lg' (large) does not meet my specific needs. Consequently, I decided to customize it. According to the official documentation, customization involves passing a CSS class when opening the modal using the 'windowClass' property. In order to achieve this, I created a CSS class named 'modal-huge' as shown below:
.modal-huge .modal-dialog {
width: 80%;
}
.modal-body
{
height: 80%;
}
Subsequently, I applied this newly created class as a parameter when initializing the modal panel:
var modalInstance = $modal.open({
templateUrl: 'productDetail.html',
controller: 'ProductDetailController',
windowClass: 'modal-huge',
resolve:{
productDetail: function (){
$scope.hideLoader();
return response;
}
}
});
My approach involved using percentage values for both width and height attributes to ensure a responsive design that adapts based on the screen size and the parent element's dimensions. However, I encountered a problem where the height adjustments were only being recognized when specified in pixels (px) rather than percentages, thus disrupting the responsiveness of the design. Any insights on what might be causing this issue or potential solutions would be highly appreciated. Thank you in advance!
In case additional context is necessary, here are snippets of the remaining code:
The structure of the modal panel:
<div>
<script type="text/ng-template" id="productDetail.html">
<div class="modal-header">
<h3 class="modal-title">Product</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">OK</button>
<button class="btn btn-warning" data-ng- click="cancel()">Cancel</button>
</div>
</script>
</div>
Furthermore, the body section includes the modal panel referred to as 'productDetailPanel':
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" > </div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"> </div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>{{loader.loadingMessage}}</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
<div id="productDetailPanel" data-ng-include="'partials/content/panels/productDetail.html'"></div>
</body>