how to style for nested item

Hi guys, I wonder how to style for nested items like the image. There may be a lot of nested item. Thank you

6 Replies

As with most things, there are many ways to achieve this. I created something like this a few ~~weeds~~ 😆 weeks ago after having a similar question. It uses pseudo elements to generate the lines and can handle an unlimited amount of nesting: https://codepen.io/cbolson/pen/gOVrZpz

Chris Bolson

CodePen

Tree View - unlimited nested levels

...

MarkBoots•2mo ago

don't smoke to much of those 😜

noobOP•2mo ago

My layout is a table and all rows include nested rows will have an icon in the last column. How can I handle this problem?

noobOP•2mo ago

Jochem•2mo ago

what have you tried? Do you have any code? If so, please share it in codepen or something similar

noobOP•2mo ago

here is html and css I use: https://jsbin.com/kahaburocu/edit?html,css,output I'm using a function to recursive render the nested item like this

  const handleRenderChildRoles = (roles: Role[], level: number) => {
    return roles.map((role, index) => (
      <React.Fragment key={role.id}>
        <tr className={classes.row}>
          <td> {!level && role.id}</td>
          <td
            style={{
              marginLeft: `${25 * level}px`,
              paddingLeft: level ? `30px` : "18px",

              display: "block",
            }}
            className={level ? classes.subRow : ""}>
            {!!level && (
              <div
                style={{
                  position: "absolute",
                  height: !index ? "70%" : "100%",
                  width: "25px",
                  top: index ? "-50%" : "-20%",
                  left: "0",
                  borderLeft: "1px solid #000",
                  borderBottom: "1px solid #000",
                }}></div>
            )}
            {role.name}
          </td>
          <td>
            <Popover
              overlayInnerStyle={{
                padding: 0,
              }}
              content={
                <PopoverContent
                  onClickEdit={onClickEditOption}
                  onClickDelete={onClickDelete}
                />
              }
              placement="bottom"
              trigger="click">
              <Gear
                onClick={() => onClickGearIcon(role)}
                size={22}
                style={{
                  margin: "auto",
                  display: "block",
                  cursor: "pointer",
                }}
              />
            </Popover>
          </td>
        </tr>
        {!!role.child_role.length &&
          handleRenderChildRoles(role.child_role, level + 1)}
      </React.Fragment>
    ));
  };

  const handleRenderChildRoles = (roles: Role[], level: number) => {
    return roles.map((role, index) => (
      <React.Fragment key={role.id}>
        <tr className={classes.row}>
          <td> {!level && role.id}</td>
          <td
            style={{
              marginLeft: `${25 * level}px`,
              paddingLeft: level ? `30px` : "18px",

              display: "block",
            }}
            className={level ? classes.subRow : ""}>
            {!!level && (
              <div
                style={{
                  position: "absolute",
                  height: !index ? "70%" : "100%",
                  width: "25px",
                  top: index ? "-50%" : "-20%",
                  left: "0",
                  borderLeft: "1px solid #000",
                  borderBottom: "1px solid #000",
                }}></div>
            )}
            {role.name}
          </td>
          <td>
            <Popover
              overlayInnerStyle={{
                padding: 0,
              }}
              content={
                <PopoverContent
                  onClickEdit={onClickEditOption}
                  onClickDelete={onClickDelete}
                />
              }
              placement="bottom"
              trigger="click">
              <Gear
                onClick={() => onClickGearIcon(role)}
                size={22}
                style={{
                  margin: "auto",
                  display: "block",
                  cursor: "pointer",
                }}
              />
            </Popover>
          </td>
        </tr>
        {!!role.child_role.length &&
          handleRenderChildRoles(role.child_role, level + 1)}
      </React.Fragment>
    ));
  };

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

Gaming

Programming

how to style for nested item

Did you find this page helpful?