SVG's height is overlapped by uikit.js about joint

[kumilingus]

But, I have to manage multiple graph and papers,
so I just find a way that the current resize() function works as it should be.
I guess there is no option as I want if I'm using it with Uikit. I see !

I am not sure I follow. It does not matter how many papers you use on your screen. <svg> height inside the Paper needs to be set to 100% (we set it through SVG attribute, but it's overridden with CSS by UIKit). The CSS fix I suggested fixes it for all papers, and it has no impact on resize functionality.

You can contact UIKit to make their CSS more specific so that it doesn't clash with other libraries.

[kumilingus]

It's not a bug in JointJS.

The uikit CSS is too generic and affects the JointJS paper svg.

/* uikit.css */
canvas, img, svg, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

Adding the following CSS to your application will solve the issue.

.joint-paper svg { height: 100%; }

[vkcorp]

Thanks for ansewring, and actually I did a trick as you metioned for now.

Adding the following CSS to your application will solve the issue.

.joint-paper svg { height: 100%; }

But, I have to manage multiple graph and papers,
so I just find a way that the current resize() function works as it should be.
I guess there is no option as I want if I'm using it with Uikit. I see !