保持bootstrap popover在视口内 [英] keep bootstrap popover inside viewport

问题描述

我尝试使用带有按钮的边栏创建菜单，每个按钮都有一个指定的包含相关数据的弹出框。
不幸的是，其中一个popovers可能包含任意数量的行，在某些情况下它可能部分在视口外。

I am trying to create a menu using a sidebar with buttons, each one with an assigned popover containing the relevant data. Unfortunately, one of the popovers might contain an arbitrary number of rows and in some cases it might be partially outside the viewport.

请参阅http://jsfiddle.net/bfd9f/1/ 了解问题的示例（点击任务按钮）

See http://jsfiddle.net/bfd9f/1/ for an example of the issue (click the "Tasks" button)

我认为我可以通过编程方式将popover的顶部改为一个定义的值，当为负（即在视口外），并且为此，我已经设法得到一个引用popover的第一个div同时监听 show.bs.popover 事件。不幸的是，我认为由于它还没有被渲染，它似乎有一个大小（23,107），而它应该是（300，xxx）和位置（0，0） 。

I thought I could programmatically alter the popover's top to a defined value, when negative (i.e. outside the viewport) and to do this, I already managed to get a reference to the first div of the popover while listening to the show.bs.popover event. Unfortunately, I think due to the fact that it's not rendered yet, it appears to have a size of (23, 107) while it should be something like (300, xxx) and a position of (0, 0).

有办法解决这个问题吗？也许是渲染popover屏幕先测量吗？

Is there a way to solve this issue? maybe rendering the popover offscreen first to measure it? if so, how would I do that?

感谢

推荐答案

固定在即将推出的Bootstrap v3.2.0中我相信： http://jsfiddle.net/pkP77/1/

Fixed in the upcoming Bootstrap v3.2.0 I believe: http://jsfiddle.net/pkP77/1/

感谢视口功能/12328\">https://github.com/twbs/bootstrap/pull/12328

Courtesy of the new viewport feature introduced in https://github.com/twbs/bootstrap/pull/12328

这篇关于保持bootstrap popover在视口内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！