Question 42753 in Html Question posted in
Some basic documentation can be found here.

How to let the child component fill up the parent div container in my scenario? – Html

In my scenario, I want the custom component(AntVX6Comp) fill the parent component.

https://codesandbox.io/s/14m7hi

but I cannot fill up the parent in my component:
enter image description here

my requirement is fill the parent component(or div container) don’t use special number, because the container size will change.

in the Graph API, I only can give specific number as params:

 const graph = new Graph({
      container: containerRef.current || undefined,
      width: 200,
      height: 200,
      grid: true,
      async: true,
      background: {
        color: "#F2F7FA",
      },
    });

it cannot use like 100% to do with it. only number and undefined type, I also tried to use undefined, but not luck.

so how to let it fill up the parent component in React?

Tags:

2

Answers


  1. 0

    if you can’t use 100% value for the width and height, I suggest calculating the width and height of the parent container using javascript and set the values dynamically on the container element

    Login or Signup to reply.
  2. 0

    You can set the dimensions to the parent’s dimensions by getting the scrollHeight/clientHeight and scrollWidth/clientWidth from the containerRef.

    width: containerRef.current?.scrollWidth || 200,
height: containerRef.current?.scrollHeight || 300,

    The || part is for a default length.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search