Support » Plugin: TablePress » There is a compatibility issue with the plugin «Corvid – Covid-19 data Maps»

Viewing 15 replies - 1 through 15 (of 18 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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”?

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Plugin Author TobiasBg

    (@tobiasbg)

    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.

Viewing 15 replies - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.