(solved) word cloud did not show

[maggiew61]

I had trouble showing the word cloud graph. Then I figured out if I just added style="position:absolute" to the component then it would work. for example: <vue-word-cloud style="position:absolute" :words="[['romance', 19], ['horror', 3], ['fantasy', 7], ['adventure', 3]]" :color="([, weight]) => weight > 10 ? 'DeepPink' : weight > 5 ? 'RoyalBlue' : 'Indigo'" font-family="Roboto"

hope this will help some lost souls btw thank you @SeregPie for this project

[SeregPie]

Oh. Can you please provide an example, where it does not work without position: absolute. It's strange, because the component is wrapped in a div with this style:

position: 'relative',
width: '100%',
height: '100%',
overflow: 'hidden',

[maggiew61]

@SeregPie thanks for the reply. sry about the late reply. I tried the code on both vue and codpen using cdn, and none of them worked unless I put the style="position:absolute" in inline tag. As for your question, frankly, I am not too familiar with positioning in css, so I don't know why, sorry about that. But nonetheless, besides this, everything worked fine and perfect

[dzeso]

https://codepen.io/Dzeso/pen/RMyJML - it is an example of this problem. I can fix it by --> , but may you know some other way?

[SeregPie]

You need width and height for the countainer or for the compontent direct. https://codepen.io/anon/pen/PRXqYX

[dzeso]

Is there any way to have flexible height?

[SeregPie]

What do you mean? You can set percentage height.

[dzeso]

https://codepen.io/Dzeso/pen/eMbJrm - can you fix it in my example?

[SeregPie]

https://codepen.io/anon/pen/pLqeQM no problem.

[gadelkareem]

I think the problem with the style attr still exists