角度UIモーダルへのパディングの追加

Question

このplunkには、テーブルを含む角度UIモーダルがあります。私は、テーブルの境界とモーダルの境界線の間に余白を追加するが、CSSのpadding要素では動作しませんを宣言します。これを達成する方法は？

また、コンテンツの幅に応じて自動的に拡張するにはモーダル幅が必要です。これは可能ですか？

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 1

クラス.modal-コンテンツにパディングを追加代わりに

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