Question

I"m having a css problem with star-rating inside a popover, the css seems to be ignored. I'm initiliasing my popover with js like this :

$(function () {
$('[data-toggle="popover"]').popover({
    html: true,
    content: $('#popoverContent').html()
});
});

popoverContent :

<div id="popoverContent" class="hide">
  <h4><span class="label label-default">Screen</span><input type="number" class="rating" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>
</div>

However, i think that if i put the code directly in data-content attribute, it may work :

<button id="popoverButton" type="button" class="btn btn-success btn-sm" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<h4><span class="label label-default">Screen</span><input type="number" class="rating" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>">
  Rate <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>

edit : I just tried that, and it didn't work either :/

Is there any way to make CSS work ?

Thank's in advance.

Here's a fiddle sample to see what i'm talking about :

https://jsfiddle.net/66xL9sLr/

Answer 1

这是因为您直接链接到github上的css资源。这不适用于像小提琴这样的服务（当你添加它时会特别警告你）。

在控制台中，您应该会看到与此类似的错误：

样式表 https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css 未加载，因为其MIME类型＆＃34; text / plain＆＃34;，不是＆＃34; text / css＆＃34;。

如果您将CSS手动添加到小提琴的CSS字段中或在其他地方托管该文件，它就可以正常工作。

话虽如此，似乎插件仍然存在其javascript问题，并且布局引导程序为popovers创建。

第二个问题是因为使用隐藏的#popoverContent元素的布局初始化星级评分。插件使用该元素的尺寸等，而不是弹出窗口中的新尺寸。

为了解决这个问题，我做了以下几点：

从输入中删除.rating类。这可以防止插件在将其添加到弹出窗口之前初始化它。
绑定到popover的inserted.bs.popover并在那里初始化评级。现在，评级插件将使用刚刚插入到弹出窗口中的元素的布局来运行其代码。

相关代码可以在这里看到：

...

<div id="popoverContent" class="hide">
  <h4><span class="label label-default">Screen (Quality)</span><input class="ratingInput" type="number" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>
</div>

...

$(function () {
    $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
          return $('#popoverContent').html();
        }
    });

  $('[data-toggle="popover"]').on('inserted.bs.popover', function () {
    $( 'body .popover .ratingInput' ).rating('create');
  });
});

更新了小提琴here。

Answer 2

Strange, did you try with inline styling ?

Bootstrap star-rating inside popover CSS issue

2 个答案: