This is a migrated thread and some comments may be shown as answers.

tool viewHtml editing not working in twitter bootstrap modal

2 Answers 290 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Frederic
Top achievements
Rank 1
Frederic asked on 06 May 2013, 01:48 PM
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


<!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

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 06 May 2013, 02:57 PM
Hello Frederic,

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
answered on 06 May 2013, 03:14 PM
Thank you

it does indeed fix the problem

$('#myModal').on('shown', function() {
    $(document).off('focusin.modal');
});
Tags
Editor
Asked by
Frederic
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Frederic
Top achievements
Rank 1
Share this question
or