ps0604 ps0604 - 5 months ago 9
AngularJS Question

Adding padding to Angular UI modal

In this plunk I have an Angular UI modal containing a table. I want to add a margin between the table borders and the modal borders, but declaring in the css a

padding
element does not work. How to achieve this?

Also, I need the modal width to expand automatically depending on the content width. Is this possible?

HTML

<style>
.app-modal .modal-dialog {
min-width: 260px;
padding: 10px;
}
</style>

<script type="text/ng-template" id="myModalContent.html">

<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>

<table border="1" style="width:100%">
<tr>
<td>aaa</td>
<td>111</td>
</tr>
<tr>
<td>bbb</td>
<td>222</td>
</tr>
<tr>
<td>ccc</td>
<td>333</td>
</tr>
</table>

</script>


Javascript:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
windowClass: 'app-modal',
});


});

Answer

Add padding to the class .modal-content instead

.app-modal .modal-content{
   padding: 10px;
}