SVG's height is overlapped by uikit.js

[vkcorp]

What happened?

I'm using jointjs@3.7.7 with uikit@3.16.22, and found an error in my sample code. As I attched my sample code, I tried to draw a rect in my paper, but the bottom of my rect was cut. After tracking, I found SVG's height was overlapped by Uikit.

jointjs1.zip

Version

3.7.7

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

What operating system are you seeing the problem on?

Windows

[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 !

[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.