Tree's height keeps growing for no reason about vue.d3.tree HOT 9 CLOSED

Last try:

<div id="container">
<tree :data="tree" :node-text="name" layoutType="circular" class="tree">
<\div>

.tree {
    width: 100%;
    height: 100%;
}
.container{
    width: 500px;
    height: 500px;;
}

If this does not solve, I don't have time to clone your repo and check it, so you will have to share a live demo if you want me to look at it.

from vue.d3.tree.

Hello @Wenzel , your component should have a weither a height or max-height and weither a width or max-width.

from vue.d3.tree.

I just update the documentation with this restriction.

from vue.d3.tree.

Hi @David-Desmaisons ,
thank you for quickly looking at my issue and updating the documentation.

I tried again by setting a parent <div id="vued3tree">, and assigning it an height and width:
https://github.com/Wenzel/bug_vued3tree/blob/master/src/components/HelloWorld.vue#L33

But it still doesn't work.
You can see that the CSS is applied:

And the size keeps increasing:

I don't understand what i'm doing wrong here ?
I created a repo for you to reproduce the issue:
https://github.com/Wenzel/bug_vued3tree

It's a simple vuejs project with webpack.
the tree is initialized in the HelloWorld.vue component.

Thank you for your time.

from vue.d3.tree.

Assign width:100% and height:100% to the tree component

from vue.d3.tree.

I tried multiple things:
setting the size on the tree class:

.tree {
    width: 100%;
    height: 100%;
}

doesn't work

setting it on the svg generated HTML element:

svg {
    width: 100%;
    height: 100%;
}

same result

How do select the <tree> component with a CSS selector, as it doesn't exist when the HTML is generated, and the content is replaced by a <svg> element ?

I'm sorry for my lack of skills in VueJS and CSS, totally new to both of them.

Thanks.

from vue.d3.tree.

Use:

<tree :data="tree" :node-text="name" layoutType="circular" class="tree">

.tree {
    width: 100%;
    height: 100%;
}

If this not resolves the problem, create a webpackbin or something similar so I can check,thanks

from vue.d3.tree.

It didn't solve my problem:

create a webpackbin or something similar so I can check,thanks

I created a dedicated repo on Github: https://github.com/Wenzel/bug_vued3tree
all you have to do is clone, npm install and npm run dev
Is that okay ?
I'm not familiar with webpackbin :/

Thank you.

from vue.d3.tree.

It worked !
thank you for your time @David-Desmaisons.

from vue.d3.tree.