Canvas resize for unknown reason

saadfaisal commented 9 years ago

I have a bootstrap modal dialog that i am using and displaying the

I hope i am correct in assuming that this resize is being done in JSModeler and not in bootstrap.

saadfaisal commented 9 years ago

Here is the modal preview

<div class="modal fade" id="Preview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 600px; height: 750px;">
      <div class="modal-content">
        <div class="modal-header">
            <button id="Button2" type="button" runat="server" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 id="H2" class="semi-bold">3D Preview</h4>
        </div>
        <div class="modal-body">
            <div >
                <img id="SpinnerPreview" src="spin.gif" alt="Loading..." style="display: none"/>
            </div>
            <canvas style="width: 550px; height: 550px;" id="svgcanvas" width="500" height="500"></canvas>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

kovacsv commented 9 years ago

JSModeler itself never changes the size of the canvas, but if the canvas size changes outside of JSModeler, the Resize function of the viewer should be called to prevent distortion.

So I think bootstrap changes the size of the canvas, and you should call the Resize function whenever the modal dialog appears.

I hope it helps! If it does not solve your problem, please send me a link to your project for further investigation.

(PS: One other thing is that it is strange that you set your canvas width and height to 550 in style tag, but specify width and height to 500 in canvas element.)

saadfaisal commented 9 years ago

Thanks , i got it sorted out, thanks for all the great work.

kovacsv / JSModeler

Canvas resize for unknown reason #10