如何防止 uib-carousel 裁剪 uib-popover？

Posted 2023-03-06

【中文标题】如何防止 uib-carousel 裁剪 uib-popover？

【英文标题】：How to prevent uib-carousel from clipping uib-popover?

【发布时间】：2020-04-15 03:52:55

【问题描述】：

我有一个带有弹出框的小部件，并将相同的小部件插入到轮播中。

由于某种原因，虽然弹出框忽略了它在 div 内的容器边界，但在轮播中时它会被剪裁。

这就是我的意思：（***版本是包含 div 中的小部件，没有剪辑。

这个显示了受轮播大小限制的弹出框。

想知道我是否可以在 .css 中添加一些东西，这样当它在轮播中时它不会剪辑弹出框？

var app = angular.module('app', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('app').config(function() 
  angular.lowercase = function(text) 
    (text || '').toLowerCase();
  
);

class TestController 
  constructor($scope) 
    $scope.slides = [];
    $scope.foo = "I am Test Controller ";
    $scope.currIndex = 0;
    console.log("test controller instantiating");
    $scope.slides.push(
      id: 0,
      val: "one"
    );
    $scope.slides.push(
      id: 1,
      val: "two"
    )
    $scope.slides.push(
      id: 2,
      val: "three"
    );
  
  $onInit() 
    console.log("TestController onInit ");
  


app.controller("TestController", ['$scope', TestController]);

.test-container 
  width: 140px;
  height: 75px;
  padding: 1%;
  background-color: green;


.carousel-container 
  width: 140px;


.test-carousel 
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background-color: lightgreen;


.page 
  margin-left: 30px;
  margin-top: 30px;


.red-square 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 60px;
  margin-left: 50px;
  height: 50px;
  width: 50px;
  background-color: red;


.blue-dot 
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  border: 1px solid black;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-sanitize.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="page">
  <div ng-app="app">
    <div class="test-container">
      <div class="red-square">
        <div class="blue-dot" uib-popover="I'm a poppover!" popover-trigger="'mouseenter'"></div>
      </div>
    </div>
    <br />

    <div ng-controller="TestController" class=carousel-container>
      <div uib-carousel="" active="active" class="test-carousel" interval="0" no-wrap="noWrapSlides">
        <div uib-slide="" ng-repeat="slide in slides track by slide.id" active="active" index="slide.id">
          <div class="red-square">
            <div class="blue-dot" uib-popover="I'm a popover!" popover-trigger="'mouseenter'"></div>
          </div>
        </div>
      </div>
    </div>
    <br />

  </div>
</div>

【参考方案1】：

好吧，事实证明RTFM 在这种情况下会是个好建议。

如果将popover-append-to-body=true 添加到包含uib-popover 属性的元素，问题就会消失。