Canvas didn't work when creating LC in bootstrap modal

[codewithshehraz]

Hi I have a bootstrap modal and I have created LiteralyCanvas in it. It is created beautifully inside the modal but its canvas is not drawing anything.

Can anyone help, in solving the issue.

<div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 100%; display: block;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
<div id="root" style="max-width:400px; max-height:400px; position:relative;">
<div class="literally toolbar-at-top" data-reactid=".0">
<div class="lc-drawing with-gui" data-reactid=".0.0" style="background-color: transparent;"><canvas width="0" height="0" style="width: 100%; height: 100%;"></canvas>
<canvas width="0" height="0" style="background-color: transparent; width: 100%; height: 100%;"></canvas>
</div>
<div class="lc-picker" data-reactid=".0.1">
<div class="lc-picker-contents" data-reactid=".0.1.0">
<div class="lc-pick-tool toolbar-button thin-button selected" style="background-image:url(./static/img/pencil.png);" title="Pencil" data-reactid=".0.1.0.0:$0">
</div>
<div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/eraser.png);" title="Eraser" data-reactid=".0.1.0.0:$1">
</div>
<div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/line.png);" title="Line" data-reactid=".0.1.0.0:$2">
</div>
<div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/rectangle.png);" title="Rectangle" data-reactid=".0.1.0.0:$3">
</div>
<div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/ellipse.png);" title="Ellipse" data-reactid=".0.1.0.0:$4"></div><div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/text.png);" title="Text" data-reactid=".0.1.0.0:$5"></div><div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/polygon.png);" title="Polygon" data-reactid=".0.1.0.0:$6"></div><div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/pan.png);" title="Pan" data-reactid=".0.1.0.0:$7"></div><div class="lc-pick-tool toolbar-button thin-button" style="background-image:url(./static/img/eyedropper.png);" title="Eyedropper" data-reactid=".0.1.0.0:$8"></div><div class="toolbar-button thin-button disabled" data-reactid=".0.1.0.1"></div><div style="position:absolute;bottom:0;left:0;right:0;" data-reactid=".0.1.0.2"><div class="lc-color-pickers" data-reactid=".0.1.0.2.0"><div class="color-well" style="float:left;text-align:center;" data-reactid=".0.1.0.2.0.0"><label data-reactid=".0.1.0.2.0.0.0">stroke</label><br data-reactid=".0.1.0.2.0.0.1"><div class="color-well-color-container" style="background-color:white;" data-reactid=".0.1.0.2.0.0.2"><div class="color-well-checker color-well-checker-top-left" data-reactid=".0.1.0.2.0.0.2.0"></div><div class="color-well-checker color-well-checker-bottom-right" style="left:50%;top:50%;" data-reactid=".0.1.0.2.0.0.2.1"></div><div class="color-well-color" style="background-color:hsla(0, 0%, 0%, 1);" data-reactid=".0.1.0.2.0.0.2.2"> </div></div></div><div class="color-well" style="float:left;text-align:center;" data-reactid=".0.1.0.2.0.1"><label data-reactid=".0.1.0.2.0.1.0">fill</label><br data-reactid=".0.1.0.2.0.1.1"><div class="color-well-color-container" style="background-color:white;" data-reactid=".0.1.0.2.0.1.2"><div class="color-well-checker color-well-checker-top-left" data-reactid=".0.1.0.2.0.1.2.0"></div><div class="color-well-checker color-well-checker-bottom-right" style="left:50%;top:50%;" data-reactid=".0.1.0.2.0.1.2.1"></div><div class="color-well-color" style="background-color:hsla(0, 0%, 100%, 1);" data-reactid=".0.1.0.2.0.1.2.2"> </div></div></div><div class="color-well" style="float:left;text-align:center;" data-reactid=".0.1.0.2.0.2"><label data-reactid=".0.1.0.2.0.2.0">bg</label><br data-reactid=".0.1.0.2.0.2.1"><div class="color-well-color-container" style="background-color:white;" data-reactid=".0.1.0.2.0.2.2"><div class="color-well-checker color-well-checker-top-left" data-reactid=".0.1.0.2.0.2.2.0"></div><div class="color-well-checker color-well-checker-bottom-right" style="left:50%;top:50%;" data-reactid=".0.1.0.2.0.2.2.1"></div><div class="color-well-color" style="background-color:transparent;" data-reactid=".0.1.0.2.0.2.2.2"> </div></div></div></div><div class="lc-undo-redo" data-reactid=".0.1.0.2.1"><div class="lc-undo toolbar-button thin-button" title="Undo" style="background-image:url(./static/img/undo.png);" data-reactid=".0.1.0.2.1.0"></div><div class="lc-redo toolbar-button thin-button disabled" title="Redo" style="background-image:url(./static/img/redo.png);" data-reactid=".0.1.0.2.1.1"></div></div><div class="lc-zoom" data-reactid=".0.1.0.2.2"><div class="lc-zoom-out toolbar-button thin-button" title="Zoom out" style="background-image:url(./static/img/zoom-out.png);" data-reactid=".0.1.0.2.2.0"></div><div class="lc-zoom-in toolbar-button thin-button" title="Zoom in" style="background-image:url(./static/img/zoom-in.png);" data-reactid=".0.1.0.2.2.1"></div></div><div class="lc-clear toolbar-button fat-button" data-reactid=".0.1.0.2.3">Clear</div></div></div></div><div class="lc-options horz-toolbar" data-reactid=".0.2"><div data-reactid=".0.2.0"><div data-reactid=".0.2.0.$1"><div class="square-toolbar-button" data-reactid=".0.2.0.$1.0"><svg width="26" height="26" version="1.1" data-reactid=".0.2.0.$1.0.0"><circle cx="13" cy="13" r="0.5" data-reactid=".0.2.0.$1.0.0.0"></circle></svg></div></div><div data-reactid=".0.2.0.$2"><div class="square-toolbar-button" data-reactid=".0.2.0.$2.0"><svg width="26" height="26" version="1.1" data-reactid=".0.2.0.$2.0.0"><circle cx="13" cy="13" r="1" data-reactid=".0.2.0.$2.0.0.0"></circle></svg></div></div><div data-reactid=".0.2.0.$5"><div class="square-toolbar-button selected" data-reactid=".0.2.0.$5.0"><svg width="26" height="26" version="1.1" data-reactid=".0.2.0.$5.0.0"><circle cx="13" cy="13" r="2.5" data-reactid=".0.2.0.$5.0.0.0"></circle></svg></div></div><div data-reactid=".0.2.0.$10"><div class="square-toolbar-button" data-reactid=".0.2.0.$10.0"><svg width="26" height="26" version="1.1" data-reactid=".0.2.0.$10.0.0"><circle cx="13" cy="13" r="5" data-reactid=".0.2.0.$10.0.0.0"></circle></svg></div></div><div data-reactid=".0.2.0.$20"><div class="square-toolbar-button" data-reactid=".0.2.0.$20.0"><svg width="26" height="26" version="1.1" data-reactid=".0.2.0.$20.0.0"><circle cx="13" cy="13" r="10" data-reactid=".0.2.0.$20.0.0.0"></circle></svg></div></div><div data-reactid=".0.2.0.$30"><div class="square-toolbar-button" data-reactid=".0.2.0.$30.0"><svg width="26" height="26" version="1.1" data-reactid=".0.2.0.$30.0.0"><circle cx="13" cy="13" r="15" data-reactid=".0.2.0.$30.0.0.0"></circle></svg>
</div></div></div></div></div></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

[ahmad6242]

Its not working in modal, it gets initialized, but after that we can do anything like drawing or change the background.
Did you find any solution for that. @codewithshehraz

[codewithshehraz]

@ahmad6242 No i used a workaround for it.
I created an iframe and open it in modal. :(

[ahmad6242]

@codewithshehraz i put a delay of 1 second in between opening of modal and initializing the Canvas. Hope so it works in all my scenarios.

[Israel-Laguan]

The timeout worked for me!