将 Bootstrap Popover 应用到 Handsontable 时大小增加

Question

我正在为我们正在制作的这个网络应用程序中的某个功能使用 Bootstrap 弹出框功能。

如果元素/对象具有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>，弹出框会出错。 （有关链接，请参阅下面我的第二条评论）

如您所见，弹出框的高度和重量增加了 4px。 （注意默认是350px x 140px，而这个是354px x 144px）？

那怎么会这样呢？是否与handsontable.css 中的某些 CSS 重叠？还是它继承了它的超类/容器的任何样式？

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

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

Answer 1

确保工具提示的容器设置为“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();
        }
    });

});

}

Answer 2

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

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

最后一件事，另一个地方是与程序的“cmets”部分相关的标签。他们使用弹出框，所以我的猜测是边距被添加到这些 div 中。