Hello,
the viewHtml tool doesn't seems to work when in a bootstrap modal. It' display the code properly but the text cannot be selected or edited.
I tried it in chrome see the file attached
the viewHtml tool doesn't seems to work when in a bootstrap modal. It' display the code properly but the text cannot be selected or edited.
I tried it in chrome see the file attached
<!DOCTYPE html><html><head> <title></title> <link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" /> <link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" /> <link href="//twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script> <script src="//twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script> <script src="//twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script></head><body><!-- Button to trigger modal --><a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a><!-- Modal --><div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px"></textarea> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div></div><script> $("#editor").kendoEditor({ tools: [ "bold", "italic", "underline", "strikethrough", "fontName", "fontSize", "foreColor", "backColor", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "formatBlock", "createLink", "unlink", "insertImage", "subscript", "superscript", "viewHtml" ] }); var editor = $("#editor").data("kendoEditor"); editor.value("test testes");</script></body></html>2 Answers, 1 is accepted
0
Accepted
Hello Frederic,
Alex Gyoshev
the Telerik team
The modal windows in bootstrap suppress the focus event of all inputs that are outside of them. Since the kendo window that holds the viewHtml textarea is outside of the editor, this function kicks in. This behavior can be stopped by removing the focusin handler, as suggested in the following SO thread.
All the best,Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Frederic
Top achievements
Rank 1
Rank 1
answered on 06 May 2013, 03:14 PM
Thank you
it does indeed fix the problem
it does indeed fix the problem
$('#myModal').on('shown', function() { $(document).off('focusin.modal');});