I am having a difficult time getting this to work. I have a link that opens a jQuery UI Dialog which contains links. Those links open a Bootstrap popover which contain an input field. For some reason, the input field is not editable.
See: http://www.bootply.com/Z46ZXA133U
Markup :
<div id="dialog">
<a data-placement="bottom" data-toggle="popover" data-title="Login" data-container=".ui-front" type="button" data-html="true" href="#" id="login">Login</a>
</div>
<form id="popover-content" style="display:none">
<input type="text" value="try changing me">
</form>
Script :
$( "#dialog" ).dialog({
height: 300,
width: 350,
modal: true,
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
This is because you have
data-container="body"
on your popover. At the same time, ui-widget-overlay
and ui-front
covers the body area entirely, preventing clicks and keyboard events from being "sent" from body to the popover.
Change to
data-container=".ui-front"
and you are good. Forked bootply -> http://www.bootply.com/AXpc6PKuSO