tool viewHtml editing not working in twitter bootstrap modal

3 posts, 1 answers
  1. Frederic
    Frederic avatar
    16 posts
    Member since:
    Aug 2011

    Posted 06 May 2013 Link to this post


    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>
        <link href="//" rel="stylesheet" />
        <link href="//" rel="stylesheet" />
        <link href="//" rel="stylesheet" />
        <script src="//"></script>
        <script src="//"></script>
        <script src="//"></script>
        <script src="//"></script>
    <!-- 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 class="modal-body">
            <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px"></textarea>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
            tools: [
        var editor = $("#editor").data("kendoEditor");
        editor.value("test testes");
  2. Answer
    Alex Gyoshev
    Alex Gyoshev avatar
    2497 posts

    Posted 06 May 2013 Link to this post

    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!
  3. Frederic
    Frederic avatar
    16 posts
    Member since:
    Aug 2011

    Posted 06 May 2013 Link to this post

    Thank you

    it does indeed fix the problem

    $('#myModal').on('shown', function() {
Back to Top