How can I change the height of the svg (class "v-canvas show touches")?

[Junqi98]

Hi @dash14 , What should I do if I want to change the height attribute shown in the picture to make it adaptive to the height of the page?

[dash14]

Hi @Junqi98, The height is overridden by the stylesheet, so if main.ts contains the following css importing, it will be adjusted the size of the parent container. Please check if the following line is contained in the main.ts.

import VNetworkGraph from "v-network-graph";
import "v-network-graph/lib/style.css";  // ⭐ 

For more information, please see here.

Best Regards

[jjackevans]

Hi, I'm experiencing the same issue.

To layout my application, the root element is fixed to the screen height, and all other components are configured to expand to this root element.

In this configuration, the svg component overflows my root component and doesn't display as I would like.

When I manually remove the height="500" and width="500" within the svg html, the components expand correctly as I would like.

Could you recommend me the correct way to configure the components to work with v-network-graph, such that it will only expand to it's parent - and not overflow?

Edit: it seems to be always forced to a square shape.

[dash14]

Hi @jjackevans, If the css is imported as shown above, the v-network-graph element will be styled at 100% for both width and height, and the width/height="500" specification will be ignored. First, could you please check if the css is imported correctly?

In addition, if a 100% specification is undesirable, the v-network-graph element can be placed inside an element with a position: relative style to match the size of the parent container, as shown below.

<script setup lang="ts">
import { ref } from "vue";
import { defineConfigs } from "v-network-graph";
const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
};
const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
};

const layouts = ref({
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
});

const configs = defineConfigs({
  node: {
    selectable: true,
  },
});
</script>

<template>
  <div class="container">
    <v-network-graph
      :nodes="nodes"
      :edges="edges"
      :layouts="layouts"
      :configs="configs"
    />
  </div>
</template>

<style scoped>
/* parent container */
.container {
  position: relative; /* ⭐ */
  width: 50vw;
  height: 50vh;
  border: 1px solid #000;
}
</style>

[jjackevans]

Thanks for your response @dash14 .

The CSS is definitely imported correctly, and v-network-graph is already in a relative container.

The issue is the component is being forced into a square shape, and I'd like it to be a variable rectangle to fit the remaining free space on the page.

[dash14]

Hi @jjackevans, Thanks for the check and reply. Since I have never seen such behavior, could you provide a minimal code that can be reproduced?

[jjackevans]

Running the sample you sent above will also only produce a square-shaped component, unless you manually override the dimensions.

Try this, and resize the window:

.container {
  position: relative; 
  flex-grow: 1; /* ⭐ */
  border: 1px solid #000;
}

[dash14]

Thank you for your response @jjackevans

I'm checking this just after creating a new project in vue-cli. Since the root element is not a flex layout, flex-grow style had no effect. I don't know yet, maybe some differences outside of the sample code are affecting this behavior.

The following is what I checked the css in the browser inspector. How is it in your environment?

[jjackevans]

Hi,

Unsure how our browsers are rendering this differently. I also have created a new Vue project, with App.vue as:

<template>
    <NetworkGraph></NetworkGraph>
</template>

NetworkGraph.vue as

<template>
  <div class="container">
    <v-network-graph
        :nodes="nodes"
        :edges="edges"
        :layouts="layouts"
        :configs="configs"
    />
  </div>
</template>

<style scoped>
/* parent container */
.container {
  position: relative;
  flex-grow: 1; /* ⭐ */
  border: 1px solid #000;
}
</style>

You can see from this second screenshot, that in a full-size browser, the node canvas extends below the viewport (scrollbar), which is the behaviour I am trying to avoid!

Thanks!

[dash14]

Hi @jjackevans , Thank you for checking and providing more information. I do not know the detailed browser specifications, but it appears that under certain conditions, the aspect ratio specified for svg is preferred. Please try to avoid this by specifying the height explicitly. If you want to fit the entire screen, specify the height explicitly from html and body as shown below, and it will be rendered correctly.

App.vue

<template>
  <NetworkGraph></NetworkGraph>
</template>

<style>
html, body, #app {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
</style>

NetworkGraph.vue

<template>
  <div class="container">
    <v-network-graph
      :nodes="nodes"
      :edges="edges"
      :layouts="layouts"
      :configs="configs"
    />
  </div>
</template>

<style scoped>
.container {
  position: relative;
  height: 100%;
}
</style>

However, I also understood that when the height is automatically controlled by flex layout, etc., the square is maintained and the behavior is not intuitive, as you have pointed out. I would like to confirm how to deal with this issue and the scope of its impact, and consider how to address it. Thank you!

[jjackevans]

Thanks.

Yes - I did try this on all my used browsers (Chrome, Safari, Firefox + iOS + Android) and was experiencing the same behaviour.

I can confirm that setting the height explicitly works. It would be ideal to have a flexible height - but I can work around this.

Please see my email about coffees 😄

Edit:

I can definitely survive with an explicit height setting. So don't resolve this for my behalf!

[dash14]

Thank you @jjackevans. I know some people will face the same problem again in the future, so I have fixed it to become more robust. The fix is released at v0.6.6. Please try it out If you’d like!

And, thank you so much coffees!! 😍

[jjackevans]

Can confirm 0.6.6 behaves as expected. Thanks 😄 !

[dash14]

Thanks for confirming, @jjackevans. I appreciate your help! This issue will close due to a revised fixed height specification.