How can increase a width of the table row

[rameshramboo54]

Hello,

I am using this project https://codepen.io/talleyran/full/eLbjRN but i am not able to increase a width of this tree structure I am using " Vertical tree with root" I needed in a way that it’s fit to the screen . I try increasing a width But id doesn’t work .

Thank You

[m_hutley]

request unclear.

1. You have no tables.
2. What do you want to “fit the screen”? The divs already fit the screen as best-able.

[snadyleiby]

Try adding,

body > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  box-sizing: border-box;
}

[PaulOB]

Hi,

That’s not really built to be fluid as its always the last row that needs to stretch and it can’t really do that as it is nested in the element above. A lot of measurements are also in pixels which makes it even harder. A grid layout would probably have been better for a more fluid layout.

You can stretch the initial layout with the following code but if you add more rows then they will start to overflow the screen.

@media screen and (min-width: 800px) {
  html,
  body {
    margin: 0;
    padding: 0;
  }
  body > div {
    flex: 1 0 0;
    margin: 1rem;
  }

  .tree.vertical li {
    flex: 1 0 100%;
  }
}

(It won’t be much use though if you are adding a lot of content instead of the node text that’s there at present.)

These tree structures can soon become complicated and unwildly and require masses of horizontal space. We had a question a while back that resulted in this demo.

Just for fun I had a go at coding my own version for a fluid width.

It’s a lot simpler than that other one but you soon run into space issues with a lot of nodes (as would any of them I guess). (The hardest part is adding the new nodes in the right place in the nested html.)