Звездный рейтинг Bootstrap внутри всплывающей проблемы CSS

У меня проблема css со звездным рейтингом внутри всплывающего окна, css, кажется, игнорируется. Я инициализирую свое всплывающее окно с помощью js следующим образом:

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

всплывающее содержимое :

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

Однако я думаю, что если я помещу код непосредственно в атрибут содержимого данных, он может работать:

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


javascript jquery css rating-system bootstrap-popover
person codeless    schedule 04.03.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это потому, что вы напрямую ссылаетесь на ресурс css на github. Это не работает с такими сервисами, как fiddle (который специально предупреждает вас об этом, когда вы его добавляете).

В консоли вы должны увидеть примерно такую ​​ошибку:

Таблица стилей https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css не был загружен, так как его MIME-тип "text/plain" не является "text/css". ".

Если вы добавите CSS вручную в поле CSS скрипки или разместите файл в другом месте, он будет работать нормально.

При этом кажется, что у плагина все еще есть проблема с его javascript и загрузкой макета, создаваемой для всплывающих окон.

Эта вторая проблема вызвана тем, что звездный рейтинг инициализируется с использованием макета вашего скрытого элемента #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');
  });
});

Обновленная скрипта доступна здесь.

person Marcelo    schedule 04.03.2016
comment
@codeless Нашел решение второй проблемы. Ответ обновлен. - person Marcelo; 04.03.2016
comment
Все еще не работает, я вернулся к первой проблеме, как будто css не обнаружен. Я думаю, что я не должен удалять рейтинговый класс! - person codeless; 04.03.2016
comment
@codeless Чем ваш код отличается от связанного пера? Там это работает. - person Marcelo; 05.03.2016
comment
Действительно ? это работает для вас? это не для меня даже в связанной ручке! - person codeless; 05.03.2016
comment
Это работало для меня в Firefox. Я проверил в Chrome и получил ту же проблему с файлом js звездного рейтинга. Я пошел дальше и добавил его вручную (как и в случае с файлом CSS). Проверьте здесь: jsfiddle.net/by2vjyxe/1 - person Marcelo; 05.03.2016
comment
Теперь он работает на jsFiddle, но не в моих локальных файлах, потому что моя кнопка находится внутри: ‹section›‹table›‹tr›‹td›‹button›... Я обновил ваш jsfiddle, чтобы он выглядел как мой настоящий код, и он не сработало: jsfiddle.net/by2vjyxe/2 - person codeless; 05.03.2016
comment
@codeless Я изменил код, чтобы сделать его более надежным. Теперь это должно работать в гораздо более общем случае. - person Marcelo; 07.03.2016
comment
Большое спасибо, теперь работает отлично! Ты рок чувак :) - person codeless; 07.03.2016

arrow_upward
-1
arrow_downward

Странно, вы пробовали встроенный стиль?

person Lazar Georgiev    schedule 04.03.2016
comment
Да, я пробовал это, а также другие свойства css: 'position:relative, float:right' не уверен, что это было предназначено для решения проблемы, но просто чтобы вы знали - person codeless; 04.03.2016