Closed DeadcatDev closed 5 years ago
Ok, the ALL issues are because there is lack of:
The component can't get height / width of elements and not render bounduaries without it. This is added in all live examples but not to the demos.
Ah thanks for letting me know. 👍 I will re-test the examples and make sure they all work out of the box.
I'm having what seems like the same issue, but I haven't been able to fix it in the same way.
No errors in console, or compiler (using CRA). Just getting a div without its dimensions properly defined (height 0). Any ideas on what I could be missing? react-tag-cloud v1.1.2
Here's what I've got down:
/*** CSS File ***/
.app-outer {
align-items: center;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
padding: 20px 0;
position: absolute;
right: 0;
top: 0;
}
.app-inner {
display: flex;
flex-direction: column;
height: 100%;
max-width: 1000px;
width: 100%;
}
.tag-cloud {
flex: 1;
}
Component render:
render() {
return (
<div className="app-outer">
<div className="app-inner">
<TagCloud
className="tag-cloud"
style={{
fontFamily: 'sans-serif',
color: '#000',
fontSize: 14,
padding: 5,
width: '100%',
height: '100%',
flex: 1
}}>
<div>Test</div>
<div>Testing</div>
</TagCloud>
</div>
</div>
)
}
DOM:
@trm313 react-tag-cloud doesn't have an intrinsic size of its own. Which means that it inherits the size from its parent. Looking at your DOM code, Make sure that app-inner
, app-outer
, card-body
, etc.. all a size configured.
I've recreated example with simple webpack project, just not working, no bugs or errors on console. My code:
Just nothing shows up.