1

I'm writing a custom sub-theme of bootstrap with Drupal 9, and have noticed that table elements in my forums do not render properly:

enter image description here

This is despite me selecting "Bordered Table" in the configuration settings:

enter image description here

The next thing I tried was using Chrome's "inspect" feature to manually add class = "table" to the table element, which caused it render much more nicely;

enter image description here

I don't see any options to apply that class to table elements, either in the forum settings nor in the bootstrap settings.

I have a few questions to help me (and hopefully others) understand what's happening here;

  1. Is adding the class = "table" to table elements the right approach?
  2. Assuming it is, what's the right way to apply this class to table elements? (I've not averse to writing php code, I've just never written a theme before so I don't know where to start)
  3. What's the point of those bootstrap table settings - they don't seem to do anything?

EDIT:

As per leymannx's suggestion, I've enabled twig debugging and looked at the resulting html:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'forums' -->
<!-- FILE NAME SUGGESTIONS:
   * forums--containers--0.html.twig
   * forums--0.html.twig
   * forums--containers.html.twig
   x forums.html.twig
-->
<!-- BEGIN OUTPUT from 'core/modules/forum/templates/forums.html.twig' -->
  

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'forum_list' -->
<!-- BEGIN OUTPUT from 'core/modules/forum/templates/forum-list.html.twig' -->
<table>
  <thead>
    <tr>
      <th>Forum</th>
      <th>Topics</th>
      <th>Posts</th>
      <th>Last post</th>
    </tr>
  </thead>
  <tbody>
      <tr>
      <td>
                          <div title="No new posts">
            <span class="visually-hidden">No new posts</span>
          </div>
          <div><a href="/forum/1">General discussion</a></div>
                      <div></div>
                        </td>
              <td>
          0
                  </td>
        <td>0</td>
        <td>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'forum_submitted' -->
<!-- BEGIN OUTPUT from 'core/modules/forum/templates/forum-submitted.html.twig' -->
  n/a

<!-- END OUTPUT from 'core/modules/forum/templates/forum-submitted.html.twig' -->

</td>
          </tr>
    </tbody>
</table>

<!-- END OUTPUT from 'core/modules/forum/templates/forum-list.html.twig' -->
11
  • Haven't you answered your own question there? Your tables don't have the required class on them for your CSS to style them
    – Clive
    Dec 23 '20 at 11:43
  • @Clive sorry the question was poorly formed - see the edit. Basically I'm not sure what to do from here (is adding the table class the right approach, how do I go about adding this class, and what do those settings in bootstrap do, since they don't seem to have any effect?).
    – quant
    Dec 23 '20 at 11:49
  • What's the point of those bootstrap table settings - they don't seem to do anything? is that the case when using the bootstrap theme directly ? (no sub).
    – No Sssweat
    Dec 23 '20 at 12:35
  • Sounds like a bug report to me.
    – leymannx
    Dec 23 '20 at 15:52
  • 2
    I’m voting to close this question because it's now a known issue, tracked and fixed via the theme's issue queue on drupal.org.
    – leymannx
    Dec 27 '20 at 17:09
1

I opened issue #3190017 Apply table settings to core's forum list table where I added the preprocess plugin and the forum list template with the adjustments to respect the theme settings. You now can change the table settings and revisit /forum to see how the changes are applied. You can simply use the patch via Composer if you want.

enter image description here enter image description here

1
  • Nice work, thanks for sharing. I'll mark this as the answer.
    – quant
    Dec 27 '20 at 22:25
1

leymannx suggested twig debugging, which was super helpful. The solution I came up with was to copy the core/modules/forum/templates/forum-list.html.twig file into mytheme/templates and then modify it to take the table theming elements from the system/table.html.twig file in bootstrap.

Here's the end result:

{#
/**
 * @file
 * Default theme implementation to display a list of forums and containers.
 *
 * Available variables:
 * - forums: A collection of forums and containers to display. It is keyed to
 *   the numeric IDs of all child forums and containers. Each forum in forums
 *   contains:
 *   - is_container: A flag indicating if the forum can contain other
 *     forums. Otherwise, the forum can only contain topics.
 *   - depth: How deep the forum is in the current hierarchy.
 *   - zebra: 'even' or 'odd', used for row class.
 *   - icon_class: 'default' or 'new', used for forum icon class.
 *   - icon_title: Text alternative for the forum icon.
 *   - name: The name of the forum.
 *   - link: The URL to link to this forum.
 *   - description: The description field for the forum, containing:
 *     - value: The descriptive text for the forum.
 *   - new_topics: A flag indicating if the forum contains unread posts.
 *   - new_url: A URL to the forum's unread posts.
 *   - new_text: Text for the above URL, which tells how many new posts.
 *   - old_topics: A count of posts that have already been read.
 *   - num_posts: The total number of posts in the forum.
 *   - last_reply: Text representing the last time a forum was posted or
 *     commented in.
 * - forum_id: Forum ID for the current forum. Parent to all items within the
 *   forums array.
 *
 * @see template_preprocess_forum_list()
 *
 * @ingroup themeable
 */
#}
{% if responsive %}
  <div class="table-responsive">
{% endif %}
{%
  set classes = [
    'table',
    bordered ? 'table-bordered',
    condensed ? 'table-condensed',
    hover ? 'table-hover',
    striped ? 'table-striped',
    sticky ? 'sticky-enabled',
  ]
%}
<table{{ attributes.addClass(classes) }}>
  <thead>
    <tr>
      <th>{{ 'Forum'|t }}</th>
      <th>{{ 'Topics'|t }}</th>
      <th>{{ 'Posts'|t }}</th>
      <th>{{ 'Last post'|t }}</th>
    </tr>
  </thead>
  <tbody>
  {% for child_id, forum in forums %}
    <tr>
      <td{% if forum.is_container == true %} colspan="4"{% endif %}>
        {#
          Enclose the contents of this cell with X divs, where X is the
          depth this forum resides at. This will allow us to use CSS
          left-margin for indenting.
        #}
        {% if forum.depth > 0 %}{% for i in 1..forum.depth %}<div class="indent">{% endfor %}{% endif %}
          <div title="{{ forum.icon_title }}">
            <span class="visually-hidden">{{ forum.icon_title }}</span>
          </div>
          <div><a href="{{ forum.link }}">{{ forum.label }}</a></div>
          {% if forum.description.value %}
            <div>{{ forum.description.value }}</div>
          {% endif %}
        {% if forum.depth > 0 %}{% for i in 1..forum.depth %}</div>{% endfor %}{% endif %}
      </td>
      {% if forum.is_container == false %}
        <td>
          {{ forum.num_topics }}
          {% if forum.new_topics == true %}
            <br />
            <a href="{{ forum.new_url }}">{{ forum.new_text }}</a>
          {% endif %}
        </td>
        <td>{{ forum.num_posts }}</td>
        <td>{{ forum.last_reply }}</td>
      {% endif %}
    </tr>
  {% endfor %}
  </tbody>
</table>
{% if responsive %}
  </div>
{% endif %}

The table now seems to render sensibly;

enter image description here

2
  • 1
    Ah yeah, that's okay. But it doesn't respect the configuration settings from the screenshot from your question, or does it? Maybe I can add an answer later using hook_preprocess_forum_list.
    – leymannx
    Dec 24 '20 at 23:21
  • @leymannx no you're right - it doesn't. I had hoped that those twig elements would cause the settings to be respected, but I don't think I understand enough about themes/twig. If you have a better way of doing this (perhaps with that hook) please let me know.
    – quant
    Dec 25 '20 at 1:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.