ps0604 ps0604 - 1 year ago 32
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

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?


.app-modal .modal-dialog {
min-width: 260px;
padding: 10px;

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

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

<table border="1" style="width:100%">



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

$scope.modalInstance = ${
templateUrl: 'myModalContent.html',
windowClass: 'app-modal',


Answer Source

Add padding to the class .modal-content instead

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