LAyout problems when putting bpmn-js in a modal

Users
1

I want to put the BpmnNavigatedViewer in a modal (see Redirecting…), so basically it is embedded in

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Process details</h4>
          </div>
          <div id="popupPanel" class="modal-body">
HERE IT COMES
    <div class="content" id="bmmn-drop-zone">
              <div id="bpmnCanvas" class="bpmn-io-viewer-height"></div>
            </div>
...

As soon as I do this the font and some layout things are messed up:

If I put the

somewhere on the page (not the model) it works fine.
Any ideas?

Cheers
Bernd

Answer

You have to make sure the modal is attached to the DOM and display != none for label rendering to work correctly. Otherwise you see the text layouting problems you mentioned.

2

Outside of the modal it looks perfectly fine:

3

Interessting: When I move the div with the viewer to the modal AFTER it got rendered completly it seems to be OK:
bpmnViewer.importXML(data.bpmn20Xml, function(err) { if (!err) { $("#bmmn-drop-zone").appendTo("#popupPanel");

4

You have to make sure the modal is attached to the DOM and display != none for label rendering to work correctly. Otherwise you see the text layouting problems you mentioned.