I have a small widget with a popover that works fine when placed inside a div, but gets clipped when inserted into a carousel.
Here's an example to illustrate what I mean: (The top image shows the widget in a div without clipping)
https://i.sstatic.net/Vgrfd.png
The second image demonstrates the popover being limited by the size of the carousel.
https://i.sstatic.net/vfvpN.png
I'm wondering if there is a way to modify the .css so that the popover does not get clipped when placed inside a carousel.
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>