Bootstrap Popover does not resize to page size
I have the following code for simple text input and I want the popover to provide some additional information, however when I resize the page the popover is static. HTML:
<form action = "" id = "userInput" onsubmit = "return validateInput(this);" method = "GET">
<div class="form-group" id = "input1">
<label for="textInput">Input area</label>
<input type="text" name = "userInput" class="mainInput" id="textInput" autofocus required autocomplete = "off">
</div>
</form>
javascript:
$(document).ready(function () {
$('.mainInput').popover({'trigger': 'focus', 'placement': 'right',
'container': 'body', 'html': true, 'content': 'a simple popover'});
});
source to share
See https://github.com/twbs/bootstrap/issues/9517
You will want to use the container
Popover option and set it to something more local to the target than body
:
container
Adds a popover to a specific element. Example
container: 'body'
. This parameter is especially useful because it allows you to place a popover in the document flow next to the launcher, which will prevent the popover from floating away from the launcher when the window is resized.
source to share
As stated here :
there are two ways to tackle this issue, you can listen for resize and call .popover ('show') on active popovers (which will resize the popover) - or better way is to use a container option so that the popover is positioned in the document flow using the triggering element
Simple example:
<p id="paragraph">Paragraph</p>
<script type="text/javascript">
// Show popover on page load
$('#paragraph').popover({'content': 'test'}).popover('show');
// Bind resize event
$(window).bind('resize', function(){
$('#paragraph').popover('show');
});
</script>
source to share
$(document).ready(function(){
popover_position();
});
$(window).resize(function(){
popover_position();
});
function popover_position(){
var get_left = ($('.mainInput').offset().left) + (($('.mainInput').width() + (padding left + paddeing right) ) /2)-($('.popover').width() / 2);
$('.popover').css({'left': parseInt(get_left)+'px' , 'right':'auto'});
$('.arrow').css('left','50%');
}
*(padding left + paddeing right) replace with padding left and padding right given if given for example :- ($('.mainInput').width() + 49) / 2) , here 49 is total padding(left + right)
source to share