This page provides an overview of using
edit_preview
mode, when loading Question Editor V3 in a modal window.In order to get edit_preview
mode to work properly when using Question Editor in a modal window requires an extra step. In edit_preview
mode, the preview panel should remain static on the page as you scroll, as shown below:

Window scroll listeners do not fire when scrolling in a modal window, thus we must attach listeners to the modal too. In order for the
edit_preview
global layout to work properly when QE is loaded in a modal, a special attribute must be placed on the containing modal window element, as there is no generic modal class/attribute/tag. That is:
data-lrn-qe-modal-container
This data attribute should be placed on the container which has 'overflow: auto' on it. That could be on the topmost modal element itself, or on the modal body. Below, we provide examples for both situations.
Note: 'position: fixed' CSS does not work if a parent container has a transform on it. Bootstrap applies a transform to its modal by default, which means the static preview panel does not work properly. If Question Editor detects that a bootstrap modal is being used, it applies a 'transform: none' to it, so be aware that any custom transforms may not work.
Variable Height Modal
If using a variable height modal window, i.e. it does not have a fixed height and goes off the viewport, then the data attribute should be placed on the topmost modal element. <div id="myModal" class="modal fade in" role="dialog" data-lrn-qe-modal-container style="display: block;">
<div class="modal-dialog modal-lg" style="transform: none;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">QEV3 in Modal</h4>
</div>
<div class="modal-body">
<div class="my-question-editor learnosity-question-editor rendered">
<div class="lrn lrn-qe">...</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Fixed Height Modal
If using a variable height modal window, i.e. the modal body has a fixed height(so window does not scroll), then the data attribute should be placed on the modal body element (where the fixed height and overflow: auto is placed). <div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">QE v3 in Modal</h4>
</div>
<div class="modal-body" style="height: 400px; overflow-y: auto;" data-lrn-qe-modal-container>
<div class="my-question-editor"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>