Width and border changes with tables

Hello,

In version 1.0.12 of the Solo theme, I updated the tables to respect the "Enable High, Medium, and Low" responsive table settings in Views. Solo includes a custom table template (table.html.twig). To ensure compatibility with Drupal and any contributed modules that may require custom templates, I applied the table CSS specifically to Solo’s template using the class solo-table-all.

Since W3CSS classes do not always work seamlessly with Drupal, some custom code may be necessary to override Drupal's default behavior. The issue you're experiencing is due to not using Solo's table Twig template. The global CSS was intentionally removed to prevent overriding styles from Drupal core or contributed modules.

In the theme settings, you have the option to add custom CSS or JavaScript for your convenience. I developed this feature to provide a flexible solution, recognizing that everyone's needs may vary. This allows users to easily customize different aspects of the site in a quick and efficient way. Feel free to use this feature to customize tables or any other components as needed.

To apply styling to all tables on your site, you can reintroduce the previous CSS in the theme settings and use the page ID to override any custom styles as needed. Let me know if you need further clarification!

your-site-dot-com/admin/appearance/settings/solo

#page-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

Old:

.page-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

New:

.page-wrapper .solo-table-all {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: table;
}

Best wishes,
Alaa

Hello,

Many thanks for the clear explanation and support.

Regards,
JG

Automatically closed - issue fixed for 2 weeks with no activity.

Hello,

After testing all type of tables created in Drupal, unfortunately the default Solo's template isn't applied everywhere, leading to inconsistencies in table layouts. In the latest release, I implemented basic table settings to ensure a uniform look across all tables.

Best wishes,
Alaa

OK. But unfortunately it seems now that table customisation via 'CSS Injector' or 'CSS Dynamic' in 'Global site' doesn't work anymore.
In my case, in order to display the below borderless table with a 100% width in the 'Highlighted' region:

<div>
    <table id="myTable">
        <tbody>
            <tr>
                <td>item a</td>
                [...]
                <td>item b</td>
            </tr>
            <tr>
                <td>item c</td>
                [...]
                <td>item d</td>
            </tr>
        </tbody>
    </table>
</div>

I had these CSS settings:
* Global site: in 'CSS Dynamic' has been added:

#page-wrapper table#myTable {
  width: 100%;
}

* Libraries & Fonts: 'load W3.CSS library locally' is ticked;
* Page Wrapper: in 'CSS Classes Only', 'image-auto' is added;
* Highlighted: in 'CSS Classes Only', 'w3-responsive w3-table' is added.

It worked well from 1.0.13 to 1.0.15, but not with the latest versions: if the 100% width is still displaying, now the table is bordered.
Adding border: none; or border-style: none; in the CSS code above doesn't change anything, neither does removing all code from 'CSS Injector' or 'CSS Dynamic' in 'Global site' and letting them empty.

Am I missing something?

Hello,

Two types of borders are added: one for the table and another for the td/th elements.

#page-wrapper table#myTable,
#page-wrapper table#myTable tr th,
#page-wrapper table#myTable tr td {
  border: none;
}

Best wishes,
Alaa

Thanks, that works... but only within the 'CSS Injector'!
The 'CSS Dynamic' seems not working anymore; whatever I put in it, it doesn't apply on myTable, even when I clear caches or disable then re-enable CSS aggregation.

Hello,

The JS/CSS files are dynamically generated and saved to either ../web/sites/default/files/solo/solo-css-dynamic.css or ../web/sites/default/files/solo/solo-js-dynamic.css. These files are created when you visit any page on the site. You can add your CSS, save it, and then visit any page to trigger the file creation. If aggregation is disabled, you can inspect the page source in your browser and view the attached CSS directly. To confirm the file exists, you can also check the path manually. If it's missing, you may be dealing with a file permissions issue.

Best wishes,
Alaa

Hello,

Here's what I have on the server:

$ ls -laR web/sites/default/files/solo/
web/sites/default/files/solo/:
total 16
drwxrwxr-x  4 user user 4096 Nov  2 11:59 .
drwxrwxr-x 10 user user 4096 Mar 21 12:00 ..
drwxrwxr-x  2 user user 4096 Mar 20 20:13 css
drwxrwxr-x  2 user user 4096 Nov  2 11:59 js

web/sites/default/files/solo/css:
total 12
drwxrwxr-x 2 user user 4096 Mar 20 20:13 .
drwxrwxr-x 4 user user 4096 Nov  2 11:59 ..
-rw-rw-r-- 1 user user  127 Mar 21 12:01 solo-css-dynamic.css

web/sites/default/files/solo/js:
total 8
drwxrwxr-x 2 user user 4096 Nov  2 11:59 .
drwxrwxr-x 4 user user 4096 Nov  2 11:59 ..
$ cat web/sites/default/files/solo/css/solo-css-dynamic.css 
#page-wrapper table#myTable,
#page-wrapper table#myTable tr th,
#page-wrapper table#myTable tr td {
  border: none;
}
$ 

But, after having unticked 'Aggregate CSS files' in 'Configuration > Performance' and cleared caches, when I look in Firefox Developer Tools > Style Editor, I can see:

#page-wrapper table#languages {
  width: 100%;
}

This is the CSS code I put previously in 'CSS Dynamic', before the update to the latest Solo versions; in fact, it seems to be stocked (and stuck) somewhere since the update, whilst the new version of 'solo-css-dynamic.css' seems not to be loaded.

Regards,

JG

Hello,

It seems like the browser isn't loading the updated file. I've updated the theme → to include a version number when attaching JS/CSS, which forces the browser to load the new code. Feel free to use that.

Additionally, you can clear the browser cache or do a hard reload:

Firefox: Ctrl + F5 (Windows/Linux) or Cmd + Shift + R (Mac)
Or open DevTools → go to the "Network" tab → check "Disable cache"

Best wishes,
Alaa

Actions done on my local development environment:

Server side: drush cache:rebuild;
Client side: in Firefox and Chromium, cache cleared then hard reload done with Ctrl + F5.

Results:

1) With Solo 1.0.17:
Nothing changes, I still have a bordered table.

2) With Solo 1.0.x-dev:
That works, a no-border table displays.

Many thanks for that!
So I'll wait for the next stable release to update my production environment.

Regards,

JG