Как изменить .popover-content CSS для ui-bootstrap popover

Question

Я использую ui-bootstrap popover для отображения некоторых уведомлений в своем приложении. Я использую шаблон uib-popover для оформления содержимого popover.

Я хотел бы изменить настройки заполнения для каждого элемента внутри popover.

Я пробовал использовать атрибут popover-class, но это просто настраивает CSS для общего popover, а не элементы, содержащиеся внутри - это то, что, по-видимому, определяет класс CSS .popover-content.

Вот HTML для пирог:

Кроме того, я не хочу, чтобы это сделать, просто выполнив:

.popover-content { 
    margin: 0px; 
} 

, как я использовал Popovers в нескольких местах по всей моей приложения и не хотят, чтобы все они получили переопределение CSS.

Может ли кто-нибудь сказать мне, как изменить это правильно? Вся помощь очень ценится ...

EDIT 1: Я попытался сделать так, как было предложено в комментариях makshh, и использовать селектор CSS для изменения класса «.popover-content». Этот класс является div, содержащимся в родительском классе .popover.

Я пытался сделать это с помощью следующих действий:

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

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

Это должно сделать запас левого ноля для всех дочерних див из .my-уведомления-пирога, которые должны быть применены к пирогам. Однако, похоже, это вообще не применяется. Этот подход может быть не идеальным, поскольку он установит маржу для всех divs ниже popover, которые я, возможно, не захочу. Есть ли способ специально настроить целевой класс .popover-content с помощью селекторов CSS?

Я создал 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

Я проверил ваш код. Вы что-то пропустите. Динамически созданный контент не может загружать существующие CSS или Js. Вы должны загрузить css и js, когда вы clickbutton. Просто следуйте этому пути. Надеюсь, он будет работать с ним хорошо.

<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 тогда он будет работать недвижимость. См. Изображение ниже, как я пишу код.

Я надеюсь, что это поможет вашему проекту.

Answer 3

Ну, похоже, что это было заполнение, а не маржа, которую нужно было изменить! Что за дурь ... ну ладно ... извините, что ... все еще не уверен, что самый точный способ настроить таргетинг только на контент-контент div

Answer 4

Добавьте это к вашему примеру плункера .. .popover-no-margin .popover-content{ padding:0px; } и проверьте, это то, что вы хотели. Это удаляет лишние пробелы в popover и будет применяться к этому popover только тогда, когда вы уже определили класс popover-no-margin для этого элемента.

Answer 5

Просто проверьте мой код css, отражающий содержимое popover. Вы можете обрабатывать CSS для добавления пирог с помощью CSS для поповера-контента .popover линии или создания пользовательских CSS для пирог как поповер-класс = "мой-поповер-класс":

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

вы можете добавить свой CSS, соответственно, как вы хотите в .popover-контент .popover-линии (например, цвет, края, отступов и т.д.)