-1

I use the chart library Nivo (I have also tried others, same problem). I have a DIV with content as seen here the title and the statistics. But I don't want this to overhang like below. Why does the content overhang?

enter image description here

<ContentHolder>
    <Title title="Hallo Welt" />

    <div className="widget-stats-holder">
      <div className="widget-inner-stats">
        <ResponsivePie
            data={data}
            margin={{ top: 16, right: 16, bottom: 32, left: 16 }}
            innerRadius={0.5}
            padAngle={1}
            cornerRadius={3}
            />
      </div>
    </div>
</ContentHolder>
Leon Schwanitz
  • 223
  • 1
  • 8

1 Answers1

1

In this instance, you're using something called a "wrapper" or as it's called in your code, a "holder" div to center around content. Have you tried using "overflow: hidden" as a CSS parameter on the div that contains the content? That should hide the overhang of the widget-title div! You'll want to make sure you set the overflow to hidden on a wrapper that contains everything else you want hidden. If you give your content a parameter of "overflow: hidden", then the content has nothing to hide, but the container it's in does if that makes sense!

Otherwise if you still need the dataset to be represented, you might have to consider a minimum height for the div holding "widget-title" so that the content doesn't get prematurely cut off!

Dharman
  • 30,962
  • 25
  • 85
  • 135
Deltaweb
  • 46
  • 7
  • I dont want a cut off. The content is responsive. I just want a smaller chart. When i use overflow: hidden, the chart is cut of at the bottom. – Leon Schwanitz Feb 22 '21 at 18:08
  • So what I'm understanding is happening here, then, is that the div you have highlighted is inheriting the height/width properties of the svg at the bottom of the tree. And because you have classes implemented that would likely add padding and margin, the original container remains despite its 100% x 100% height and width. Have you tried giving the svg a percentage in width/height to make the image itself responsive to the box holding it? Does the div also need to be responsive? – Deltaweb Feb 22 '21 at 18:48