CODEWITHSUNDEEP
angular-uiangular-ui-bootstrap
jsparks
jsparks

Reputation: 1030

Angular UI Modal CSS

I'm using the Angular UI modal and would like to make it smaller. According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:

<div class="modal-dialog modal-sm">

I'm having trouble incorporating this div into my Angular modal template. Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template. Are the outer modal, modal-dialog, and modal-content divs already provided by Angular? If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div? I tried adding the full modal div structure to the template and it caused problems with my modal. I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either. Any ideas? Thanks.

Update: here is the content of my modal template after I tried to include the outer Bootstrap div's. It is a very simple modal to confirm the user wants to delete an item.

<div class="modal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
           <div class="modal-header">
                <h4>Confirm Delete</h4>
           </div>
           <div class="modal-body">
               <p>Are you sure you want to delete?</p>
           </div>
           <div class="modal-footer">
               <button class="btn btn-primary" ng-click="confirm()">Confirm</button>
               <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
           </div>
        </div>
     </div>
 </div>

The result is it doesn't show my modal correctly. I can see the backdrop and a very tiny sliver of what I assume to be my modal.

Update: Using @lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the @modal-sm Less variable.

.confirm-modal .modal-dialog {
    width: @modal-sm;
}

Upvotes: 2

Views: 8620

Answers (1)

lbrazier
lbrazier

Reputation: 2654

OK, I understand now. Here's what we did in the .css:

.appcustom-modal-med > .modal-dialog {
  width: 60%;
}

then in the controller: windowClass: 'appcustom-modal-med'

Upvotes: 6

Related Questions