Question

我正在使用ui-bootstrap popover在我的应用程序中列出一些通知。我正在使用uib-popover-template来设计popover的内容。

我想更改popover中每个元素的填充设置。

我尝试过使用popover-class属性，但这只是为整个popover配置CSS，而不是内部包含的元素 - 这就是.popover-content CSS类似乎可以控制的。

这是popover的html：

<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
        popover-class="my-notifications-popover"></span>

此外，我不想这样做：

.popover-content {
     margin: 0px;
}

因为我在整个应用程序的多个地方都使用过popover，并且不希望它们全部重新定义CSS。

有谁能告诉我如何以正确的方式改变这种情况？所有人都非常感谢...

编辑1 ：我已尝试按照makshh的评论中的建议进行操作，并使用CSS选择器修改＆＃39; .popover-content＆＃39;类。此类是包含在父级＆＃39; .popover＆＃39;中的div。类。

我尝试使用以下方法执行此操作：

.my-notifications-popover {
    margin-left: 0px;
}

.my-notifications-popover div {
    margin-left: 0px;
}

这应该使.my-notifications-popover的所有子div的margin-left为零，应该应用于popover。但它似乎根本没有应用。这种方法可能并不理想，因为它会为我可能不想要的popover下的所有div设置余量。有没有办法专门使用CSS选择器专门定位.popover-content类？

我创建了一个plnkr来准确显示它是如何工作的......你可以在这里看到它：https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso

Answer 1

加

.popover-no-margin .popover-content {
  padding: 0px; 
}

https://plnkr.co/edit/NiIh6qwZiscNZC5ZZrod?p=preview

，因为你传递了自定义类

popover-class="popover-no-margin"

Answer 2

好吧它似乎是填充而不是需要更改的边距！真是个白痴......好吧......对不起...还不确定什么是最准确的方法来定位popover-content div

Answer 3

将此添加到您的plunker示例.. .popover-no-margin .popover-content{ padding:0px; }并检查这是否是您想要的。这将删除弹出窗口中的额外空格，它将仅适用于此弹出窗口，因为您已为此元素定义了类popover-no-margin。

Answer 4

检查我的代码css是否反映了popover内容。您可以通过向popover-content .popover-line添加css或为popover创建自定义css来处理pops的css，如popover-class =＆＃34; my-popover-class＆＃34;：

HTML

<button popover-class="my-popover-class" popover-placement="right" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>   <script type="text/ng-template" id="myPopoverTemplate.html">
    <div class="popover-line"> item 1 : This an example of angular ui-bootstrap popover custom content css</div>
    <div class="popover-line"> item 2</div>
    <div class="popover-line"> item 3</div> </script>

CSS

 .popover-content .popover-line { margin: 10px 0px; } 
.my-popover-class {   color: blue;   padding-left: 0 !important;}

工作演示为here

您可以根据需要在.popover-content .popover-line中添加相应的css（如颜色，边距，填充等）

Answer 5

我检查了你的代码。你错过了什么。动态创建的内容无法加载现有CSS或Js。您应css js时加载click和button。按照这种方式。我希望它能很好地发挥作用。

<script type="text/ng-template" id="popoverTemplate.html">
        <div class="popover-line"> item 1</div>
        <div class="popover-line"> item 2</div>
        <div class="popover-line"> item 3</div>
        <style>
        .popover-content{
          display: block;
          width: 200px;
        }
        .popover-content .popover-line{
          background-color: #ff00ff;
          border-bottom: 2px solid #121212;
          padding: 10px 15px;
        }
        </style>
    </script>

如果你这样写你的自定义CSS那么它将工作属性。请参阅下面的图片我如何编写代码。

我希望这对你的项目有所帮助。

如何为ui-bootstrap popover更改.popover-content CSS

5 个答案: