Unable to focus Input element inside a Bootstrap Popover inside a jQuery UI Dialog -
i having difficult time getting work. have link opens jquery ui dialog contains links. links open bootstrap popover contain input field. reason, input field 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 because have
data-container="body"
on popover. @ same time, ui-widget-overlay
, ui-front
covers body area entirely, preventing clicks , keyboard events being "sent" body popover.
change to
data-container=".ui-front"
and good. forked bootply -> http://www.bootply.com/axpc6pkuso
Comments
Post a Comment