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

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

php - render data via PDO::FETCH_FUNC vs loop -

The canvas has been tainted by cross-origin data in chrome only -