Skip to content

Tabs nested 2+ levels deep in lists do not render

Nesting a set of tabs inside a nested list is not working. For example, this will not render as tabs:

1. Optional. Track the progress and verify that all job artifacts migrated
   successfully using the PostgreSQL console.
   1. Open a PostgreSQL console:

      {{< tabs >}}

      {{< tab title="Linux package (Omnibus)" >}}

      ```shell
      sudo gitlab-psql
      ```

      {{< tab title="Docker" >}}

      ```shell
      sudo docker exec -it <container_name> /bin/bash
      gitlab-psql
      ```

      {{< tab title="Self-compiled (source)" >}}

      ```shell
      sudo -u git -H psql -d gitlabhq_production
      ```

      {{< /tabs >}}

Here's how this renders:

image

A set of tabs nested only one level deep does work.

This seems to have something to do with how Hugo interprets indentation within nested items. In this case, we have a shortcode nested in a shortcode, having issues when nested in a list... that is nested in a list.

At this time, there are only 4 of these tabs-in-a-list-in-a-list instances on the site, so we can probably launch without this, as long as we refactor the content that relied on this.

Maybe related:

If it isn't possible to get this working, we should provide linting for it and note this limitation in the styleguide.

Possibly related: #104 (closed)

Edited by Sarah German