如何防止uib-carousel截取uib-popover？

Question

我有一个带有弹出窗口的小部件，同样的小部件也被插入到一个carousel中。

由于某些原因，虽然popover忽略了div中的容器边界，但在carousel中却被裁剪了。

我的意思是：(最上面的版本是包含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>

​

Answer 1

事实证明，在这种情况下，RTFM将是一个很好的建议。

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