Hi,
thanks for your post, and sorry for the trouble.
Is the plugin active right now? And can you please turn off the CSS caching/minification temporarily? That way I can investigate what exactly the problem is. My guess is that this plugin loads CSS code without preventing conflicts with other plugins, like TablePress.
Regards,
Tobias
Thread Starter
Bahus
(@bahus)
Both plugins are currently enabled.
CSS caching and minification are disabled.
When the page loads, the table is displayed correctly, but then it breaks again.
Hi,
thanks a lot! That really helps!
From what I can see, the problem is that there are some weird defaults in the Corvid plugin’s /wp-content/plugins/covid19-plugin-wp/assets/css/styles.css CSS file. In addition, they are using CSS selectors that are not just being applied to their tables, but to those from TablePress as well…
For some fixing, you couldadd this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.dataTables_wrapper .tablepress {
border-spacing: 0!important;
border-collapse: collapse!important;
}
.dataTables_wrapper .tablepress th:before {
display: none;
}
.dataTables_wrapper .tablepress th:after {
border-top: none;
}
Regards,
Tobias
Thread Starter
Bahus
(@bahus)
Does not work.
In this setup, I have my own CSS code.
.tablepress tbody td {
vertical-align: middle !important; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
border: .5px solid black; /*Параметры рамки */
word-break: break-all !important;
width: 100% !important;
overflow-x: auto !important;
}
.tablepress td,
.tablepress th {
text-align: center !important; /* Выравнивание текста - по центру*/
}
/* Стили для ячеек главной строки */
.tablepress tfoot th,
.tablepress thead th {
background-color: #d9edf7; /* Цвет фона главной строки*/
font-weight: 700;
vertical-align: middle !important; /* Выравнивание текста (по вертикали) в ячейках - по центру*/
font-size: 11px; /* Размер шрифта*/
color: #111111; /* Цвет шрифта */
border: .5px solid black; /*Параметры рамки */
}
/* Стили для основных ячеек*/
.tablepress td,
.tablepress th {
padding: 8px; /* Внутренние отступы от краев ячеек*/
background: 0 0;
font-size: 11px; /* Размер шрифта*/
color: #111111; /* Цвет шрифта */
border: .5px solid black; /*Параметры рамки */
}
It may conflict with yours.
Hi,
it’s working for me now. Please make sure to force-reload the page (Ctrl+Shift+R) to clear the browser cache.
Regards,
Tobias
Thread Starter
Bahus
(@bahus)
Tried in different browsers. The result is the same. At the beginning of the load, the table is displayed correctly. After the page is fully loaded, the layout breaks.
I can record video.
Hi,
for me, it’s working on two different computers… Please make sure that your browser cache is cleared, or maybe try in a Private or Incognito browsing tab (where no cache is used).
Regards,
Tobias
Thread Starter
Bahus
(@bahus)
With the cache disabled and in incognito mode, the result is the same.
After the page is fully loaded, the table has a horizontal scroll.
Hi,
correct, the table has horizontal scrolling, because not all columns fit on the screen. Don’t you want the horizontal scrolling?
The issue with the extra space between the rows is gone for me.
Regards,
Tobias
Thread Starter
Bahus
(@bahus)
In the settings, the horizontal scrolling option is disabled.
When the plugin “Corvid – Covid-19 data Maps & Widgets for WordPress” mentioned in the first post is disabled, the table is entered completely with line breaks.
When the plugin “Corvid – Covid-19 data Maps & Widgets for WordPress” is enabled, the line wrapping will disappear. And as a result, horizontal scrolling appears.
Maybe that’s the problem?
Thread Starter
Bahus
(@bahus)
Maybe send you the css of the plugin “Corvid – Covid-19 data Maps & Widgets for WordPress”?
Hi,
yes, that’s also caused by some CSS of that plugin. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.dataTables_wrapper .tablepress th,
.dataTables_wrapper .tablepress td {
white-space: normal;
}
That should bring back word-wrapping but also give you horizontal scrolling if word-wrapping is not enough.
Regards,
Tobias
Thread Starter
Bahus
(@bahus)
The table is not scrollable, but the column borders in the header are missing.
The css files that the plugin has.
https://disk.yandex.ru/d/p0v53YEOAGtTIg
Hi,
on small screens, like my phone, the table is horizontally scrollable. On large screens (like laptop), the content fits on the page, so that no scrolling is necessary.
For the border: You are setting a border width of 0.5 pixels. This does not make sense, as pixels can not be split. It will be kind of random whether the browser rounds this up to 1 or down to 0.
Regards,
Tobias
Thread Starter
Bahus
(@bahus)
By borders: note (the first picture in the starting post) that when another plugin is disabled, all borders in the table are displayed.
.
