Basic Content tables on mobile render incorrectly.

Created on 13 June 2025, 29 days ago

Problem/Motivation

Tables created in CK Editor within a Basic Content component don't render correctly on mobile.

Proposed resolution

Component `02-molecules/basic-content` relies on the JavaScript in `01-atoms/table` to prepare tables within basic content.

Either split the JS implementation, so table code is a base utility that can be applied in any component, or implement a dependency for basic-content on table, so that any time basic-content is used, it will include table libraries.

🐛 Bug report
Status

Active

Version

1.11

Component

Code

Created by

🇦🇺Australia alan.cole

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @alan.cole
  • 🇦🇺Australia alan.cole

    PR: https://github.com/civictheme/uikit/pull/639

        Options to solve this were either split the JS implementation so table JS is a base utility that can be applied in any component, or implement a dependency on table for basic-content so that any time basic-content is used it will include table libraries.
        Implementing the JS split (given the current structure of civictheme) would likely require adding a [data-table] attribute to any div that is, or may contain a table. This attribute could be added to both atom/table and molecule/basic-content and anywhere else a table may be used (this could also include paragraph components as they too use basic-content styling).
        The benefit on tables in base is the dependencies within components are simplified, but the drawback is that more styles and JS exist within the base library whether they are used or not.
        This implementation has a drawback of needing to use the drupal theme machine name core/components.civictheme--table within the SDC. Up until now the drupal theme name is not assumed to be civictheme and could change without affecting the UI Kit, however as SDC is a drupal concept and dependencies rely on providing the theme name, this is likely to get murkier the more we include drupalisms in UI Kit.
  • 🇦🇺Australia RichardGaunt Melbourne

    PR reviewed and merged in UI Kit

  • 🇦🇺Australia RichardGaunt Melbourne
Production build 0.71.5 2024