Canvas width doesnt fit the container

[balaram26]

Hi,i seem to have the same issue of canvas window not fitting, even when testing your examples from the Repo. Whatever example i load, the "canvas" element always starts from the middle of the page. The width of the canvas never fits its parent container and first of the container is empty always.
and i my vue versions are :"vue": "^2.5.2" and "vue-cytoscape": "^0.2.8", I have attached my .vue file. I have also added some screenshots showing the positioning of the canvas inside the cytoscape container.

The position of whole cytoscape container

The canvas element being positioned from the center of the cytoscape container, going beyond the bounds of the cytoscape container.

test_cytoscape_vue.txt

[rcarcasses]

Hi @balaram26, from what you describe it seems like you have a css issue that is causing this. This doesn't look like vue-cytoscape issue. Did you imported the library css: import 'vue-cytoscape/dist/vue-cytoscape.css'?

[balaram26]

hi @rcarcasses ,yes i rechecked my main.js . Here is sample Vue project i created to test it again without importing any other css based module. Here is the zip file of the whole project.
https://1drv.ms/u/s!AonI71hfBXuMyIsdHQBcJVrwBu3SvQ

[balaram26]

@rcarcasses I think this is caused by "cytoscape.js" itself. I tested it directly and still had the exact same issue when using with vue component. The only way to fix this was just add additional css to canvas(canvas { left:0; }) to reposition itself inside the container. Though this is not the solution, but it can fix this issue for now.