Bootstrap 将弹出窗口应用于 Handsontable 后大小增加

Question

我正在使用 Bootstrap 弹出窗口功能来实现我们正在制作的这个网络应用程序中的某个功能。

如果 element/object 具有 data-toggle=popover 属性，则会触发每个弹出窗口。

正如您在这张图片中看到的：（请参阅下面我的第一条评论）

一切顺利，假设弹出窗口默认设置如下：

HTML

<!--Feel Rate Popover-->
<div id="feel-rate-popover" class="panel panel-primary">
  <div class="loading">Loading...
    <div class="panel-heading" id="feel-rate-heading">
        <div class="row">
            <div class="col-xs-3">
                <img class="feel-logo" src="images/happy_l.png">
                <div id="happy-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/sad_l.png">
                <div id="sad-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/angry_l.png">
                <div id="angry-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/surprised_l.png">
                <div id="surprised-count"></div>
            </div>
        </div>
    </div>

    <div class="panel-footer" id="feel-rate-footer">
      <a data-toggle="modal" data-target="#express-feeling-modal">
        <span class="pull-left">Express Feeling</span>
        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
        <div class="clearfix"></div>
      </a>
    </div>
  </div>
</div>

CSS

#feel-rate-popover,
#feel-rate-loading,
#warning-feeling {
  display: none;
}

.feel-logo {
  height: 85%;
  width: 85%;
}

.express-button {
  height: 75%;
  width: 75%;
}

.popover {
  width: 350px !important;
  max-width: 350px !important;
  height: 140px !important;
}

.col-xs-3 {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

#express-feel-row .col-lg-3 {
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
}

#feel-rate-heading {
  padding: 5px 5px;
  margin-right: 5px;
  margin-left: 5px;
}

#feel-rate-footer {
  border-top: 1px solid #d7d7d7;
  background-color: #ffffff;
  padding: 5px 5px;
  height: 20px;
}

但是，如果我将它应用于 Handsontable 的 <td>，怎么会出现弹出窗口出错的情况呢？ （请参阅下面我对 link 的第二条评论）

如您所见，弹出框的高度和重量增加了 4 像素。（请注意，默认设置为 350px x 140px，而此设置为 354px x 144px）?

怎么会变成这样呢？是不是和handsontable.css中的CSS重叠了？或者它是否继承了它的任何样式 superclass/container?

这里是handsontable.css的代码供参考： https://github.com/handsontable/handsontable/blob/master/dist/handsontable.full.css

供 FIDDLE 参考： http://jsfiddle.net/anobilisgorse/hU6Kz/3286/

Answer 1

假设存在重叠 CSS 是非常合理的，因为目前此类样式问题经常出现。您是否尝试查看 handsontable CSS 文件以查看是否可以找到它？如果您知道确切的边距和它所影响的 div，这应该不难。

当你这样做时（如果你找到它，请告诉我们！）一个简单的解决方案是自己覆盖样式并将其设置为“！重要”以确保 HOT 不会覆盖它。和以前一样，这实际上是一个很好的开发，当试图将它设置为 .

时，弹出窗口根本无法正常工作

最后一件事，另一个要查看的地方是与程序的 "comments" 部分相关的标签。他们使用弹出窗口，所以我的猜测是边距被添加到那些 divs.

Answer 2

确保工具提示的容器设置为 'body'，那就是解决你的问题

function popover() {
$('[data-toggle="popover"]').each(function () {

    /* Instantiate the popover defaults */
    var $elem = $(this);
    $elem.popover({
        trigger: 'hover',
        html: true,
        container: 'body',
        content: function() {
            return $('#feel-rate-popover').html();
        }
    });

});

}

Bootstrap 将弹出窗口应用于 Handsontable 后大小增加

Bootstrap Popover size increased upon applying it to Handsontable

css

twitter-bootstrap

handsontable