How to use custom css on uibmodal? How to customize the width and height of a uibmodal for a particular selection item?

Question

I have various menu items which use the same uibmodal when clicked on any of them. Only for one of the menu selections, I want the uibmodal to be displayed as a smaller size. I tried the following:

$scope.profile = function() {
            var modalInstance = $uibModal.open({
                templateUrl: 'views/modal/user_profile.html',
                controller: 'UserController',
                scope: $scope,
                windowClass: 'userFileWindow',
                size: 'sm'
            });
        };

Size: sm is not helping. It shows the default size as any other menu selection, how to I modify the width and height of this uibmodal?

I am new to working to Angular, sorry if its an insane question. Thank you.

score 3 · Answer 1 · answered Sep 14 '19 at 14:39

Customize uibModal FULLSCREEN CSS&JS CODES

JS :

var modalInstance = $uibModal.open({
                    animation: OrdersController.animationsEnabled,
                    ariaLabelledBy: 'modal-title',
                    ariaDescribedBy: 'modal-body',
                    templateUrl: 'GENERAL/Orders/orders.dialog.html',
                    controller: 'OrdersDialogController',
                    controllerAs: 'vm',
                    size: size, //param
                    backdrop: 'static',
                    keyboard: true,
                    backdropClick: false,
                    windowTopClass: '',
                    windowClass: 'my-modal', //maybe param
                    resolve: {
                        data: function () {
                            return data = { row: row, edit: type, order: vm.main, orderDetail: vm.detail };
                        }
                    }
                })

CSS:

.my-modal .modal-dialog {
    width: 100% !important;
    padding: 0px;
    margin: 0px;
}

.my-modal .modal-content {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 0px;
    margin: 0px;
}

.my-modal .modal-footer {
    position: absolute;
    bottom: 0px;
    width:100%;
    padding:2px !important;
}

REFERENCES:

Naren Murali · Answer 2 · 2017-09-01T19:41:17.053

2

Why not set the size through css.

JSFiddle Demo

CSS:

.userFileWindow .modal-content {
  width: 500px;
  height:500px;
}
.userFileWindow .modal-footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
}

Reference:

set modal size

edited Sep 01 '17 at 19:41

answered Sep 01 '17 at 19:15

Naren Murali

19,250
3
27
54

score 1 · Accepted Answer · answered Sep 01 '17 at 19:35

1

Going one step forward, how to add the css class to this uibModal?

.userFileWindow {

    .modal-sm{
        width: 50%;
        height: 50%;
}
}

answered Sep 01 '17 at 19:35

Saranya Garimella

465
1
5
12

My bad, userFileWindow is the generic windowClass. How to create a separate ID for this menu item, so that the width and height properties can be applied to just this Menu item? – Saranya Garimella Sep 01 '17 at 19:39
when you reuse the `UI Bootstrap` model just give a different window class, its configurable right – Naren Murali Sep 01 '17 at 19:43
1

I created a different window class, it works. Thank you! – Saranya Garimella Sep 01 '17 at 20:31

How to use custom css on uibmodal? How to customize the width and height of a uibmodal for a particular selection item?

3 Answers3

Customize uibModal FULLSCREEN CSS&JS CODES