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

Question

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

我想更改弹出框内每个元素的填充设置。

我尝试使用 popover-class 属性，但这只是为整个弹出窗口配置 CSS，而不是其中包含的元素 - 这就是 .popover-content CSS class 似乎在统治。

这是弹出窗口的 html：

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

此外，我不想通过以下方式做到这一点：

.popover-content {
     margin: 0px;
}

因为我在整个应用程序的多个地方使用了弹出窗口，并且不希望它们全部重新定义 CSS。

谁能告诉我如何以正确的方式更改它？非常感谢所有帮助...

编辑 1：我尝试按照 makshh 的评论中的建议进行操作，并使用 CSS 选择器修改“.popover-content”class。此 class 是包含在父“.popover”class.

中的 div

我尝试用以下方法做到这一点：

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

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

这应该使应应用于弹出窗口的 .my-notifications-popover 的所有子 div 的左边距为零。但是它似乎根本没有应用。这种方法可能并不理想，因为它会为弹出窗口下方的所有 div 设置边距，而我可能不希望这样做。有没有办法专门针对 .popover-content class 使用 CSS 选择器？

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

Answer 1

我检查了你的代码。你错过了什么。动态创建的内容无法加载现有 CSS 或 Js。当您 click button 时，您应该加载 css 和 js。就这样走吧。我希望它能很好地配合它。

<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，那么它将起作用属性。请参阅下图我是如何编写代码的。

I hope it will help your project.

Answer 2

好吧，看来需要更改的是填充而不是边距！真是个白痴......哦好吧......对此感到抱歉......仍然不确定什么是仅针对 popover-content div

的最准确方法

Answer 3

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

Answer 4

只需检查我的代码 css 是否反映了弹出窗口内容。您可以通过将 css 添加到 popover-content 来处理弹出窗口的 css .popover-line 或为弹出窗口创建自定义 css 作为 popover-class="my-popover-class":

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

已添加

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

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

之所以有效，是因为您通过了自定义 class

popover-class="popover-no-margin"

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

How to Change .popover-content CSS for ui-bootstrap popover

css

twitter-bootstrap

angular-ui-bootstrap

popover