4 replies

How to display definition lists in a nested ordered list in a unified grid?

✅solved

front-end

I am still working on a web-based file browsing interface. I was thinking about how I'd express the underlying data, ideally, and ended up with:

<ol>
  <li class="directory"><details>
    <summary><dl>
      <dt>Name</dt><dd>Directory #1</dd>
      <dt>Size</dt><dd>…B</dd>
      <dt>View</dt><dd for="view"/>
    </dl></summary>
    <ol>
      <li class="directory"><details>
        <summary><dl>
          <dt>Name</dt><dd>Directory #1.1</dd>
          <dt>Size</dt><dd>…B</dd>
          <dt>View</dt><dd for="view"/>
        </dl></summary>
        <ol>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.1</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.2</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
        </ol>
      </details></li>
    </ol>
  </details></li>
</ol>

<ol>
  <li class="directory"><details>
    <summary><dl>
      <dt>Name</dt><dd>Directory #1</dd>
      <dt>Size</dt><dd>…B</dd>
      <dt>View</dt><dd for="view"/>
    </dl></summary>
    <ol>
      <li class="directory"><details>
        <summary><dl>
          <dt>Name</dt><dd>Directory #1.1</dd>
          <dt>Size</dt><dd>…B</dd>
          <dt>View</dt><dd for="view"/>
        </dl></summary>
        <ol>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.1</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.2</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
        </ol>
      </details></li>
    </ol>
  </details></li>
</ol>

Now, I'm trying to get the list of files to look something like GitHub's, in a table grid. I want the first column to be the

::marker

::marker

, the second to be the result of passing the resource to

<object/>

<object/>

, & seeing what it displays, and then then name, and then the size.

My Codepen attempt failed completely. I tried

subgrid

subgrid

ding all the way from the outermost

<ol/>

<ol/>

to the

<dd/>

<dd/>

s, with:

:not(li) > ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  & > *,
  & > * > *,
  & > * > * > *,
  & > * > * > * > * {
    display: grid;
    grid-template-columns: subgrid;
  }
}

:not(li) > ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  & > *,
  & > * > *,
  & > * > * > *,
  & > * > * > * > * {
    display: grid;
    grid-template-columns: subgrid;
  }
}

& assigning

grid-column

grid-column

to different

:nth-of-type

:nth-of-type

s to no avail.

It looked like the inner grids were just occupying the first space, so I added

grid-column: 1 / -1;

grid-column: 1 / -1;

to get it to cover the whole span, which only affected the first row.

Also, my

summary::marker

summary::marker

s are disappearing.

CodePendysbulic

Nested Definition Lists

...

KP-C

Kevin Powell - Community•2mo ago•

4 replies

dys 🐙

How to display definition lists in a nested ordered list in a unified grid?

✅solved

front-end

I am still working on a web-based file browsing interface. I was thinking about how I'd express the underlying data, ideally, and ended up with:

<ol>
  <li class="directory"><details>
    <summary><dl>
      <dt>Name</dt><dd>Directory #1</dd>
      <dt>Size</dt><dd>…B</dd>
      <dt>View</dt><dd for="view"/>
    </dl></summary>
    <ol>
      <li class="directory"><details>
        <summary><dl>
          <dt>Name</dt><dd>Directory #1.1</dd>
          <dt>Size</dt><dd>…B</dd>
          <dt>View</dt><dd for="view"/>
        </dl></summary>
        <ol>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.1</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.2</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
        </ol>
      </details></li>
    </ol>
  </details></li>
</ol>

<ol>
  <li class="directory"><details>
    <summary><dl>
      <dt>Name</dt><dd>Directory #1</dd>
      <dt>Size</dt><dd>…B</dd>
      <dt>View</dt><dd for="view"/>
    </dl></summary>
    <ol>
      <li class="directory"><details>
        <summary><dl>
          <dt>Name</dt><dd>Directory #1.1</dd>
          <dt>Size</dt><dd>…B</dd>
          <dt>View</dt><dd for="view"/>
        </dl></summary>
        <ol>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.1</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
          <li class="file"><dl>
            <dt>Name</dt><dd>File #1.1.2</dd>
            <dt>Size</dt><dd>…B</dd>
            <dt>View</dt><dd for="view"><object/></dd>
          </dl></li>
        </ol>
      </details></li>
    </ol>
  </details></li>
</ol>

Now, I'm trying to get the list of files to look something like GitHub's, in a table grid. I want the first column to be the

::marker

::marker

, the second to be the result of passing the resource to

<object/>

<object/>

, & seeing what it displays, and then then name, and then the size.

My Codepen attempt failed completely. I tried

subgrid

subgrid

ding all the way from the outermost

<ol/>

<ol/>

to the

<dd/>

<dd/>

s, with:

:not(li) > ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  & > *,
  & > * > *,
  & > * > * > *,
  & > * > * > * > * {
    display: grid;
    grid-template-columns: subgrid;
  }
}

:not(li) > ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  & > *,
  & > * > *,
  & > * > * > *,
  & > * > * > * > * {
    display: grid;
    grid-template-columns: subgrid;
  }
}

& assigning

grid-column

grid-column

to different

:nth-of-type

:nth-of-type

s to no avail.

It looked like the inner grids were just occupying the first space, so I added

grid-column: 1 / -1;

grid-column: 1 / -1;

to get it to cover the whole span, which only affected the first row.

Also, my

summary::marker

summary::marker

s are disappearing.

CodePendysbulic

Nested Definition Lists

...

How to display definition lists in a nested ordered list in a unified grid?

How to display definition lists in a nested ordered list in a unified grid?

Similar Threads

Similar Threads

Similar Threads