Bootstrap star-rating inside popover CSS issue

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

It's because you are linking directly to the css resource on github. This does not work with services like fiddle (which specifically warns you about this when you add it).

In the console you should see an error similar to this:

The stylesheet https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css was not loaded because its MIME type, "text/plain", is not "text/css".

If you add the CSS manually into the fiddle's CSS field or host the file elsewhere, it works just fine.

That being said, it seems that there the plugin still has an issue with its javascript and the layout bootstrap creates for popovers.

This second issue is caused because the star rating is initialized using the layout of your hidden #popoverContent element. The plug in uses the dimensions, etc of that element, not the new one in your popover.

To fix this I did the following:

1. Remove the .rating class from your input. This prevents the plugin from initializing it before it gets added to the popover.
2. Bind to the popover's inserted.bs.popover and initialize the rating there. Now, the rating plugin will run its code using the layout of the element that was just inserted into the popover.

The relevant code can be seen here:

...

<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');
  });
});

Updated fiddle available here.