添加填充到 Angular UI 模态

Question

在这个 plunk 中，我有一个包含 table 的 Angular UI 模式。我想在 table 边框和模态边框之间添加边距，但在 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

将填充添加到 class .modal-content 而不是

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

添加填充到 Angular UI 模态

Adding padding to Angular UI modal

angularjs

angular-ui