so far to cutomize modal width i have done this
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'AddProtocolElement',
controller: 'ProtocolElementDialogController',
backdrop: 'static',
size: 'lg',
resolve: {
items: function () {
return $scope.items;
}
}
});
and override its modals lg attribute as
.modal-lg{
width:1100px !important
}
it is fine but now what I needed is to have multiple customized lg sized modals on same screen. Here is HTMl
<script type="text/ng-template" id="AddProtocolElement">
<form name="elementForm" id="elementForm" action="#" novalidate class="form-horizontal" role="form">
<div class="modal-header ">
<h3 class="modal-title">{{formHeading}} Protocol Element</h3>
</div>
<div class="modal-body">
<!-- here goes the body -->
</div>
<div class="modal-footer ">
<!-- here goes the footer -->
</div>
</form>
To adjust modal with add to your css:
.adjustwidth .modal-dialog{
width: 5000px;
}
Then add the class to the property windowClass where you instance the modal
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'AddProtocolElement',
controller: 'ProtocolElementDialogController',
backdrop: 'static',
windowClass: 'adjustwidth',
size: 'lg',
resolve: {
items: function () {
return $scope.items;
}
}
});
try width = 150px
in JavaScript. This should work without jQuery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.