CODEWITHSUNDEEP
angularjscsstwitter-bootstrap
fgonzalez
fgonzalez

Reputation: 3877

Customizing Modal Panel size Ui Bootstrap

I'm building an app using Ui bootstrap to integrate some bootstraps components with AngularJs. I need to use a modal panel but concretely the predefined size 'lg' (large) is not big enough for what I need. So I need to customize. Reading the docs, to customize you need to pass a css class when you open the modal using the property 'windowClass'. So I have created a Css class called 'modal-huge' as follows:

.modal-huge .modal-dialog{
width: 80%;
}

.modal-body
{
height: 80%;
}

Then I pass this class as a parameter when I open the modal panel:

var modalInstance = $modal.open({
            templateUrl: 'productDetail.html',
            controller: 'ProductDetailController',
            windowClass: 'modal-huge',
            resolve:{
              productDetail: function (){
              $scope.hideLoader();
              return response;
              }
            }

          });

I used percentages for both width and height to have a responsive design, so they adapt to the size of the screen taking in account the size of the parent element. My problem is that is working fine only for the width, but not for the height. For height is only considering the changes if I give the size in pixeles (px), but not if I give a percentage, which breaks the responsive design. Any idea what can be wrong or some way to fix it? Thank you very much!!

I display the rest of the code in case it helps you.

The modal panel code:

 <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>

And the body where I have included the modal panel called '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>

Upvotes: 0

Views: 552

Answers (1)

0Ds0
0Ds0

Reputation: 598

In order for % height to work you have to set a height to the parent element as well. In the .modal-body example the parent is .modal-content which in it's place has .modal-dialog as a parent.

Try something like this

.modal-dialog, .modal-content {
  height: 100%;
}

.modal-body {
  height: 80%;
}

Or check for similar questions Set bootstrap modal body height by percentage

Upvotes: 1

Related Questions