Angular UI Modal CSS

Question

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

Can you show an example of the content you are putting in your modal? Have you tried controlling the size of the modal by controlling the size of the content? — lbrazier
– lbrazier, Commented Apr 1, 2014 at 15:32
I updated the question with the contents of my modal template. As you can see there is very little content inside my modal so the size of the content is not an issue. I just want to use modal-sm to make my modal smaller than the default size. — jsparks
– jsparks, Commented Apr 1, 2014 at 18:58
I have a nearly identical modal dialog for confirm delete, without the outer divs, and it sized itself appropriately. So I'm wondering what version of bootstrap? What's in your .css? You may have to look in Chrome at the styles that are being applied to this dialog to debug. — lbrazier
– lbrazier, Commented Apr 2, 2014 at 13:55
What size is your modal? I'm wanting one sized like what displays when you click the Small Modal button on (getbootstrap.com/javascript/#modals). What I'm getting out of the box is the same size as the static example which seems to be the default size. I'm using Bootstrap 3.1.1 and Angular UI 0.10. — jsparks
– jsparks, Commented Apr 2, 2014 at 15:52

lbrazier · Accepted Answer · 2014-04-02 19:27:13Z

6

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'

edited Apr 2, 2014 at 19:27

answered Apr 2, 2014 at 19:11

lbrazier

2,6541 gold badge27 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jsparks Over a year ago

Thanks. Your solution is fairly simple and worked for me, but instead of specifying the width myself I used the @modal-sm Less variable. That makes me feel a little better that I can't simply use the modal-sm modifier in my template. I saw modal-sm and modal-lg are new as of Bootstrap 3.1.0 so maybe at some point Angular UI will allow us to use those modifiers to customize the size of the modal.

jsparks Over a year ago

I updated my question with how I used the @modal-sm Less variable.

jsparks Over a year ago

Interestingly, I searched through the Angular UI issues and found an issue for this - (github.com/angular-ui/bootstrap/issues/1718). Reading through the comments, there is a pull request in progress to be able to apply classes to modal-dialog.

Collectives™ on Stack Overflow

Angular UI Modal CSS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related