Summernote Modals locked within pure Bootstrap modals

Question

Is there a known way to cause summernote modals to break out from within bootstrap modals?

---

I have a normal modal with a summernote element within it, nothing special whatsoever.

When I use summernote features, if I use summernote within a boostrap modal, this is what I get:

JS:

$('#dropper').on( "show.bs.modal", function() {
    $('#dropping').summernote({
        height: 300
    });
})

HTML:

<div id="dropper" class="modal fade" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="dropping">text...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left">
                    <span class='fa fa-paperclip '></span>
                    Attach Digital Assets
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-default opacity75" class="close" data-dismiss="modal">
                        &times; Cancel
                    </button>
                    <button type="button" class="btn btn-warning" href="javascript:postDrop()">
                        Post Status Update
                        <span class='fa fa-bullhorn '></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Complete Bootply: http://bootply.com/113808

Answer 1

With summernote 0.6.13+ try initializing with the dialogsInBody-Parameter:

$('#dropping').summernote({
    dialogsInBody: true
});