Configuring Editor Edit/Preview Mode to Work Within a Modal – Learnosity Product & Developer Help

Overview of using edit_preview mode if loading Question Editor V3 in a modal.

In order to get edit_preview mode to work properly when using QE in a modal requires an extra step. In edit_preview mode the preview panel should remain static on the page as you scroll, as shown below:

A screenshot showing the fixed preview panel in edit_preview mode.

Window scroll listeners do not fire when scrolling in a modal, 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 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 is an example of both.

Note: 'position: fixed' CSS does not work if a parent container has a transform on it. Bootstrap applies a transform to it's modal by default, which means the static preview panel does not work properly. If QE detects that a Bootstrap Modal is being used, it applies a 'transform: none' to it to fix this, so be aware that any custom transforms may not work.

Variable Height Modal

If using a variable height modal, 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, 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)

    <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">&times;</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>

Variable Height Modal

Fixed Height Modal

Related articles