Blank Canvas on Refresh

[NiharikaPatel]

I'm using Zircle on the mixed mode and the canvas is within a container, However, on refreshing the browser the canvas appears to be the entire viewport and the Zview disappears.

[tinchox5]

Hi @NiharikaPatel! Could you provide a codepen to see the issue?

[tinchox5]

@NiharikaPatel, when you resize the browser window does the problem persist?

[NiharikaPatel]

Hi Juan, https://jsfiddle.net/37mr5324/50/ This is a little similar to what I am trying to do, however it does not seem to happen in the JSfiddle result window. I am attaching a video of my web app to help explain whats happening. And the problem persists on resizing the browsers window as well. Thank you, Niharika

…

On Mon, Dec 10, 2018 at 5:57 PM Juan Martin ***@***.***> wrote: When you resize the browser's windows the problem persist? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AeYp3O3UfcORu_pVsL1hWAhgV9pLQ441ks5u3xDtgaJpZM4ZMfLC> .

[tinchox5]

I couldn't see your video here, maybe you can attach an animated gif on this thread. However, I found a bug related to your issue. I'll fix tomorrow morning (Canada time).

[tinchox5]

Please update zircle to v.1.2.1. There was an error in the mixed mode that prevented zircle from taking reference to the size of the container when the browser was refreshed.

[NiharikaPatel]

Hi Juan , I just updated to zircle v.1.2.1 , However the issue still persists . Was I supposed to make any changes to the code as well ? I am attaching a GIF animation of the issue. Thanks, Niharika

…

On Tue, Dec 11, 2018 at 4:20 AM Juan Martin ***@***.***> wrote: Please update zircle to v.1.2.1. There was an error in mixed mode that prevented zircle from taking the size of the container as reference. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AeYp3BpU9DWjtEzpDnFvywlGhfJzUCsDks5u36MfgaJpZM4ZMfLC> .

[tinchox5]

You don't have to make any change in your code for this bug fix. There is no attached image... I think you should add it trough Github website.

[tinchox5]

Maybe the problem is that you have defined a container outside the instance of vue (I mean outside the div#app). Here there is a fork of your jsfiddle https://jsfiddle.net/tinchox5/37mr5324/ (I added a border style to see the canvas container)

[NiharikaPatel]

Oh I see, So I cannot have a container as a component for the Canvas?

…

On Tue, Dec 11, 2018 at 10:26 AM Juan Martin ***@***.***> wrote: I think maybe the problem is that you have defined a container outside the scope of vue (I mean outside the div#app). Here there is a fork of your jsfiddle https://jsfiddle.net/tinchox5/37mr5324/ (I added a border style to see the canvas container) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AeYp3PIKrgY7FugKmAjmuC23tow00Ngfks5u3_jGgaJpZM4ZMfLC> .

[tinchox5]

You should use z-canvas as container. You can add an inline style (eg: style="width: 50%") or create a class for z-canvas, like:

<div id="app">
  <z-canvas :views='$options.components' class="zircle">
  </z-canvas>
</div>
<style>
.zircle {
  width: 50% !important; 
  height:100% !important; 
  border: 2px solid red;
}
</style>

If you use a class you need to add !important on width and height properties to overrride the initial config.

[tinchox5]

There is no file attached. You need to drag and drop the image via Github website

[NiharikaPatel]

This issue was not related to Zircle, problem maybe related to the node server.