javascript - ポップオーバー CSS の問題内のブートストラップの星評価

Question

ポップオーバー内のスター評価で css の問題が発生しています。css は無視されているようです。次のように js を使用してポップオーバーを初期化しています。

$(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>

ただし、コードを data-content 属性に直接配置すると、機能する可能性があると思います:

<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>

編集：私はちょうどそれを試しましたが、どちらもうまくいきませんでした:/

CSS を機能させる方法はありますか?

前もって感謝します。

これは、私が話していることを確認するためのフィドルサンプルです。

https://jsfiddle.net/66xL9sLr/

Answer 1

github の css リソースに直接リンクしているためです。これは、fiddle のようなサービスでは機能しません (これは、追加時に特に警告します)。

コンソールに次のようなエラーが表示されます。

スタイルシート https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css はロードされませんでしたテキスト/css".

CSS をフィドルの CSS フィールドに手動で追加するか、ファイルを別の場所にホストすると、問題なく動作します。

そうは言っても、プラグインにはまだJavaScriptに問題があり、レイアウトのブートストラップがポップオーバー用に作成しているようです。

この 2 番目の問題は、隠し#popoverContent要素のレイアウトを使用して星評価が初期化されるために発生します。プラグインは、ポップオーバーの新しい要素ではなく、その要素の寸法などを使用します。

これを修正するために、次のことを行いました。

1. .rating入力からクラスを削除します。これにより、プラグインがポップオーバーに追加される前に初期化されなくなります。
2. ポップオーバーにバインドし、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');
  });
});

ここで利用可能な更新されたフィドル。

Answer 2

奇妙なことに、インライン スタイリングを試しましたか?