How to change the size of the modal.

JDX7913 · ‎11-28-2018

How do I expand the size of the modal past the "lg" preset?

This is what I have so far on the client script:

	c.modalTemplateResolveActiveContract = function () {
		c.modalInstance = $uibModal.open({
			templateUrl: 'modalTemplate',
			scope: $scope,
			size: 'lg',
			backdrop: 'static'
		});
	};
	c.closeModal = function () {
		c.modalInstance.close();
	};

I tired "xlg" but that does not work. Is there another way to achieve what I am aiming for?

Santosh_Ksagar · ‎11-28-2018

Please add "modal-dialog modal-lg" class to div. You don't have to add this function here, there is bootstrap class available. for any additional information please refer here:- Bootstrap Modal Size

JDX7913 · ‎11-28-2018

Hmmm, that is still giving me the standard large size. I also checked out your link and there is nothing about a custom size modal.

I also tried using the standard CSS with custom width and while that work. It does not resize the window like the default modal size.

Maybe I am asking too much from this bootstrap class?

Santosh_Ksagar · ‎11-28-2018

Well, in that case, try different approach, if you find anything let us know.

Prins Kumar Gup · ‎11-28-2018

Hi JDX,

First, create the style in the HTML section like:-

<div>

@media screen and (min-width: 768px) {
.modal-dialog {
width: 700px; /* New width for default modal */
}
.modal-sm {
width: 350px; /* New width for small modal */
}
}

</style>

<body>
<a href="#smallModal" class="btn btn-lg btn-primary" data-toggle="modal">Show Small Modal</a>
</body>

After that call the modal-sm class in your modal dialog section like:-

<div id="smallModal" class="modal">
<div class="modal-dialog modal-sm">//Here call your class name that aree you give in the style section
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Small Modal</h4>
</div>
<div class="modal-body">
<p>The small modal size has been changed. Now it is 50px wider than previous 300px wide modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok, I Understand</button>
</div>
</div>
</div>
</div>

</div>

Please mark a reply as Helpful/Correct.

TIA

PKG