Я разрабатываю страницу с помощью Bootstrap 3. Я пытаюсь использовать popover с placement: right
для элемента ввода. Новый Bootstrap гарантирует, что если вы используете form-control
, у вас есть элемент ввода полной ширины.
Код HTML выглядит примерно так:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
Ширина popovers слишком низкая, на мой взгляд, потому что у них нет никакой ширины, оставшейся в div. Я хочу, чтобы форма ввода была с левой стороны, и широкая папка с правой стороны.
В основном, я ищу решение, где мне не нужно переопределять Bootstrap.
Вложенный JsFiddle. Второй вариант ввода. Не использовали jsfiddle много, поэтому не знаю, но попробуйте увеличить размер окна вывода, чтобы увидеть результаты, на маленьких экранах даже не увидели бы его. http://jsfiddle.net/Rqx8T/
<div class="row" data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text" />
</div>
</div>
В основном я помещаю код popover в строку div вместо входного div. Решила проблему.
Вы можете использовать CSS для увеличения ширины вашего popover, например:
/* The max width is dependant on the container (more info below) */
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
Если это не сработает, вам, вероятно, понадобится решение ниже и измените ваш элемент container
. (Просмотр JSFiddle)
Если это не работает, вам, вероятно, нужно указать контейнер:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
Попсор содержится внутри элемента, в который он запускается. Чтобы расширить его "полная ширина" - укажите контейнер:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
Просмотрите JSFiddle, чтобы попробовать.
Мне также понадобилось более широкое поле для текстового поля поиска. Я придумал это решение Javascript (здесь, в Coffee):
$(".product-search-trigger")
.click(-> false) # cancel click on <a> tag
.popover
container: "body"
html: true
placement: "left"
title: "<strong>Product search</strong> enter number or name"
.on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))
Обходной путь находится в последней строке. Перед отображением popover параметр max-width устанавливается на пользовательское значение. Вы также можете добавить пользовательский класс к элементу tip.
.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
кофе, вот та же последняя строка, что и в обычной js: .on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
max-width
по умолчанию. Спасибо за это решение! Кстати, вместо "600px"
, я установил его "none"
. Это лучше для меня.
У меня была та же проблема. Провел довольно много времени на поиск ответа и нашел свое решение: Добавьте следующий текст в голову:
<style type="text/css"> .popover{ max-width:600px; } </style>
Чтобы изменить ширину, вы можете использовать css
Для фиксированного размера
.popover{
width:200px;
height:250px;
}
Для максимальной ширины:
.popover{
max-width:200px;
height:250px;
}
jsfiddle: http://jsfiddle.net/Rqx8T/2/
Чтобы изменить ширину popover, вы можете переопределить шаблон:
$('#name').popover({
template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})
max-width: 500px
в стиль.
С помощью того, что @EML описал выше относительно popover на модальных окнах, а также код, показанный @2called-chaos, я решил эту проблему.
У меня есть значок на модале, который при нажатии должен всплывать
Мой HTML
<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>
Мой Script
$('[rel=popover]').popover({
placement: 'bottom',
html: 'true',
container: '#name-of-modal-window .modal-body'
}).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
container: 'body'
обычно выполняет трюк (см. ответ JustAnil выше), но есть проблема, если ваш popover находится в модальном режиме. z-index
помещает его за модальный, когда popover привязан к body
. Это похоже на вопрос BS2 5014, но я получаю его на 3.1.1. Вы не должны использовать container
для body
, но если вы исправите код для
$('#fubar').popover({
trigger : 'hover',
html : true,
dataContainer : '.modal-body',
...etc });
тогда вы исправляете проблему z-index
, но ширина popover по-прежнему не соответствует.
Единственное исправление, которое я могу найти, это использовать container: 'body'
и добавить дополнительные css:
.popover {
max-width : 400px;
z-index : 1060;
}
Обратите внимание, что сами решения css не будут работать.
tooltip-append-to-body
, она появилась за модальным и модальным «серым» фоном.
Нет окончательного решения здесь:/Просто некоторые мысли о том, как "чисто" решить эту проблему...
Обновленная версия (jQuery 1.11 + Bootstrap 3.1.1 + class= "col-xs-" вместо class= "col-md-" ) исходного JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/
Теперь тот же JSFiddle с вашим предлагаемым решением: http://jsfiddle.net/tkrotoff/N99h7/8/ < ш > Это не работает: popover позиционируется относительно <div class="col-*">
+, представьте, что у вас есть несколько входов для одного и того же <div class="col-*">
...
Итак, если мы хотим сохранить popover на входах (семантически лучше):
.popover { position: fixed; }
: но при каждом прокрутке страницы, popover не будет следовать прокрутке.popover { width: 100%; }
: не так хорошо, поскольку вы все еще зависите от ширины родителя (i.e <div class="col-*">
.popover-content { white-space: nowrap; }
: хорошо, только если текст внутри popover короче max-width
См. http://jsfiddle.net/tkrotoff/N99h7/11/
Возможно, используя самые последние браузеры, новые значения ширины CSS могут решить проблему, я не пробовал.
Здесь не-coffeescript способ сделать это с зависанием:
$(".product-search-trigger").popover({
trigger: "hover",
container: "body",
html: true,
placement: "left"
}).on("show.bs.popover", function() {
return $(this).data("bs.popover").tip().css({
maxWidth: "300px"
});
});
});
Вы можете использовать атрибут data-container = "body" внутри popover
<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
data-placement="right" data-trigger="hover" title="Title"
data-content="Your content"></i>
Для людей, которые предпочитают решение JavaScript. В Bootstrap 4 tip() стал getTipElement() и возвращает объект без jQuery. Таким образом, чтобы изменить ширину поповера в Bootstrap 4, вы можете использовать:
}).on("show.bs.popover", function() {
$($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});
Вы можете настроить ширину popover с помощью методов, указанных выше, но лучше всего определить ширину содержимого до того, как Bootstrap увидит, и выполнит его математику. Например, у меня была таблица, я определил ее ширину, а затем bootstrap построил popover для этого. (Иногда Bootstrap имеет проблемы с определением ширины, и вам нужно войти и удерживать руку)
<label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-placement="right" id="Pops" ></a>
<div id="popover-content" class="hide">
<div class="popovermenu">
Your content
</div>
</div>
В итоге я установил ширину div "popover-content" в нужное мне число. (другие идентификаторы или класс не будут работать.....) Удачи!
#popover-content{
width: 600px;
}
Я использовал это (отлично работает):
.popover{
background-color:#b94a48;
border:none;
border-radius:unset;
min-width:100px;
width:100%;
max-width:400px;
overflow-wrap:break-word;
}
вы также можете добавить data-container = "body", который должен выполнить задание:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-container="body"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
Для машинописного компонента:
@Component({
selector: "your-component",
templateUrl: "your-template.component.html",
styles: ['
:host >>> .popover {
max-width: 100%;
}
']
})
Одно тестируемое решение для бета-версии Bootstrap 4:
.popover {
min-width: 30em !important;
}
Вместе с оператором jQuery:
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'focus',
html: true,
placement: 'top'
})
Боковое примечание, data-container="body"
или container: "body"
в HTML или в виде option
к объекту popover({})
на самом деле не выполняло трюк [возможно, работа, но только вместе с инструкцией CSS];
Кроме того, помните, что Bootstrap 4 beta полагается на popper.js для его размещения и всплывающей подсказки (до этого было tether.js )
Попробуйте следующее:
var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));
$('.popover').css('width', popover_size + 'px');
Так как popover_size анализируется как целое число. Другое дело, что: popover_size = ((parseInt(string[0])+350));
Добавит дополнительную ширину.
$('[data-toggle="popover"]').popover({ container: 'body' });