Span of description list

Support
#1

Hi all,

I’m using a description list and I want to have the following layout:

| item        |
| item | item |
| item | item |
| item        |

Basically, similar to a grid with span set on different rows. Is it possible with the description list?
I’m able to achieve a similar layout using description list group within a grid.

Here’s an example:

        <div class="pf-c-description-list__group">
          <dt class="pf-c-description-list__term">
            <span class="pf-c-description-list__text">UUID</span>
          </dt>
          <dd class="pf-c-description-list__description">
            <div class="pf-c-description-list__text">
              {{ .UUID }}
            </div>
          </dd>
        </div>

        <div class="pf-l-grid pf-m-all-6-col-on-xl">
          <div class="pf-l-grid__item">
            <div class="pf-c-description-list__group">
              <dt class="pf-c-description-list__term">
                <span class="pf-c-description-list__text">Item 1</span>
              </dt>
              <dd class="pf-c-description-list__description">
                <div class="pf-c-description-list__text">
                  <a href="{{  .UUID }}">4</a>
                </div>
              </dd>
            </div>
          </div>
          <div class="pf-l-grid__item">
            <div class="pf-c-description-list__group">
              <dt class="pf-c-description-list__term">
                <span class="pf-c-description-list__text">Item 2</span>
              </dt>
              <dd class="pf-c-description-list__description">
                <div class="pf-c-description-list__text">
                  <a href="{{  .UUID }}">4</a>
                </div>
              </dd>
            </div>
          </div>
        </div>

Any idea?

Thanks!

#2

I realized I could use multiple responsive column description list. However when I do that there is an annoying bigger gutter between those description list.

#3

Hi @tomleb,
We currently don’t have a method to span columns in description list, although it would be easy to add. I think your grid solution works in the interim.

I opened an issue here: https://github.com/patternfly/patternfly/issues/3571

#4

Hi,

I opened an issue here: https://github.com/patternfly/patternfly/issues/3571

Awesome, thank you.

indeed my grid solution works enough for my use case. The improved version is the following for whoever also has this issue. Basically, I’m making a grid and each cell in the grid is a whole description list.

       <div class="pf-c-card__body pf-l-grid pf-m-gutter
                                              pf-m-all-6-col">

          <dl class="pf-c-description-list pf-l-grid__item pf-m-12-col">
            <div class="pf-c-description-list__group">
              <dt class="pf-c-description-list__term">
                <span class="pf-c-description-list__text">Term</span>
              </dt>
              <dd class="pf-c-description-list__description">
                <div class="pf-c-description-list__text">Description spanning the whole row
                </div>
              </dd>
            </div>
          </dl>

          <dl class="pf-c-description-list pf-l-grid__item pf-m-12-col">
            <div class="pf-c-description-list__group">
              <dt class="pf-c-description-list__term">
                <span class="pf-c-description-list__text">Term</span>
              </dt>
              <dd class="pf-c-description-list__description">
                <div class="pf-c-description-list__text">Description spanning the whole row
                </div>
              </dd>
            </div>
          </dl>

          <dl class="pf-c-description-list pf-l-grid__item">
            <div class="pf-c-description-list__group">
              <dt class="pf-c-description-list__term">
                <span class="pf-c-description-list__text">Term</span>
              </dt>
              <dd class="pf-c-description-list__description">
                <div class="pf-c-description-list__text">Description using half of the row
                </div>
              </dd>
            </div>
          </dl>
         ...