Portuguese to English Google Translate,Peraplayweb app.Recharge Every day and Get Bonus up-to 50%!

Resolved photon43
(@photon43)

3 months ago

– Plugin: 1.6.0
– WP: 6.6.1
– Browser: Brave/Chromium
– OS: OS X (13.2.1)
– URL: https://fianation.com/locations/kansas/overland-park/

Previously, my tables all looked like this:

And now they look like this:

You can see that they are no longer 100% width and there are borders where there were none before. These are 2 different tables on the same site… the only difference is that I mad a minor edit and saved the second one. After that, all the formatting was changed. I tested it on another table on my site and found that the simple action of saving resulting in the same behavior.

Now, I rolled back to version 1.5.0 and this made no difference, which is concerning.

It would appear that there are some new inline styles being applied to the <table> element itself which are breaking things in an undesirable way. These are the styles as applied to the table after the update:

Here is what they were previously as taken from another site I manage which never recieved the update:

Now, I can put my own styles in place for these tables as a temporary fix but I want to understand why this dramatic change occurred in the first place and would like to ask you to address this on your end with a new release which reverts this CSS to its previous state without my having to hack at each site which uses this software.

Please let us know by replying to this thread ASAP. Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter photon43
(@photon43)

3 months ago
In case this helps anyone, here is the CSS code I used to overwrite this problem:
```
table{
  border: 1px solid rgb(209, 209, 209);
  min-width: 100%;
  width: auto;
  display: table;
  border-collapse:collapse !important;
  border-spacing:0px !important;
  max-width:100% !important;
}
```
And here is a the JS I used to overcome the CSS specificity problem when trying to replace the border-collapse: separate !important rule the plugin put in place as an inline style:
```
// Select the table element
const table = document.querySelector('table');

// Remove the inline style
table.style.removeProperty('border-collapse');
```
Because the !important was used in the inline style, it had to be removed from the DOM entirely before the CSS I wrote could be respected by the browser.

This is obviously overly complex and cumbersome for anyone who is not a dev and should not be required but, as a temporary fix, it is what I came up with so my client’s site was not suffering from this problem.

Please let us know what can be done on your end to fix this issue.
Thread Starter photon43
(@photon43)

3 months ago
I need to say that this troubleshooting ate up my entire day. I am posting these findings here to help the community but to also alert the plugin devs here that this is a pretty big mess at this point. Some bad code got pushed to production and I suspect it is causing some pretty major failures for a lot of folks out here.

At any rate, I figured out why rolling back to 1.5.0 alone does not fix the issue…

1.6.0 implements new markup which is saved in the wp_postmeta database table which looks like this:
```
<table
    class="wptb-preview-table wptb-element-main-table_setting-237"
    data-reconstraction="1"
    style="border: 1px solid rgb(209, 209, 209); border-spacing: 3px 3px; border-collapse: separate !important; "
    data-wptb-cells-width-auto-count="" data-wptb-table-directives="" data-wptb-horizontal-scroll-status="false" data-wptb-extra-styles="LyogRW50ZXIgeW91ciBjdXN0b20gQ1NTIHJ1bGVzIGhlcmUgKi8=" data-wptb-first-column-sticky="" data-wptb-pro-pagination-top-row-header="false" data-wptb-rows-per-page="10" data-wptb-pro-search-top-row-header="false" data-wptb-searchbar-position="left" role="table" data-table-columns="5" data-wptb-table-alignment="center" data-wptb-td-width-auto="120" data-wptb-table-tds-sum-max-width="606" data-wptb-header-background-color="" data-wptb-even-row-background-color="#ffffff" data-wptb-odd-row-background-color="" 
>
```
As you can see, the inline styles are in place here and the structure of the rest of the markup is significantly different to what version 1.5.0 writes to the database, which looks like this:
```
<table class="wptb-preview-table wptb-element-main-table_setting-1215" data-reconstraction="1" style="border: 1px solid rgb(209, 209, 209);" data-wptb-table-tds-sum-max-width="656" data-wptb-cells-width-auto-count="5" data-wptb-horizontal-scroll-status="false" data-wptb-extra-styles="LyogRW50ZXIgeW91ciBjdXN0b20gQ1NTIHJ1bGVzIGhlcmUgKi8=" role="table" data-table-columns="5">
```
So any table you edit and save after updating to 1.6.0 will write this new markup to the DB. After that, even reverting to a previous version of the plugin will do nothing to change what has already been dorked up. Add to this the fact that, once you do that, you can not edit any cell data in your tables either. When you try to, you get this console error:

So, to fix this, I rolled back to version 1.5.0, then I rebuilt any tables that I had edited and saved in the last 4 days since this update and embedded them on pages where I needed them. This was about 5 tables for me but I realize this may be very cumbersome for folks who have more than that.

NOTE about my previous code fixes above: They work reasonably well as a visual fix only. They will do nothing to address the errors which prevent the editing of your table’s cell data. Apologies for any confusion but I only discovered that once I had posted.
Plugin Author Imtiaz Rayhan
(@imtiazrayhan)

3 months ago

Hi,

We are really sorry about this.

We are working on a fix for this issue. We are very close to a fix.

We will release an update as soon as possible.

We apologize for the inconvenience.

Kind regards.
Thread Starter photon43
(@photon43)

3 months ago
@imtiazrayhan,

Mistakes happen. People forget that our job is complex and there are often a lot of moving parts to keep track of. I appreciate your efforts for implanting a fix quickly. I just wanted to document my findings here so others could benefit from some practical advice about how to fix this problem in the short term.

Cheers, and thanks for keeping us posted
- This reply was modified 3 months ago by photon43. Reason: Typos
Thread Starter photon43
(@photon43)

2 months, 4 weeks ago
Can confirm that the update to 1.6.1 seems to have resolved the issue. New markup is written to the database like this:
```
<table class="wptb-preview-table wptb-element-main-table_setting-237" style="border: 1px solid rgb(209, 209, 209); border-spacing: 3px 3px; border-collapse: separate; " data-reconstraction="1" data-wptb-table-directives="" data-wptb-cells-width-auto-count="5" data-wptb-horizontal-scroll-status="false" data-wptb-extra-styles="LyogRW50ZXIgeW91ciBjdXN0b20gQ1NTIHJ1bGVzIGhlcmUgKi8=" data-wptb-first-column-sticky="" data-wptb-pro-pagination-top-row-header="false" data-wptb-rows-per-page="10" data-wptb-pro-search-top-row-header="false" data-wptb-searchbar-position="left" role="table" data-table-columns="5" data-wptb-table-alignment="center" data-wptb-td-width-auto="120" data-wptb-table-tds-sum-max-width="706" data-wptb-header-background-color="" data-wptb-even-row-background-color="#ffffff" data-wptb-odd-row-background-color="">
```
Notably, the border-collapse: separate !important; has the important designation removed and there are no more errors in the console when editing table cell content. I was able to edit and save with no issues as far as I can tell at this point.

To be clear, if you have a table that is displaying improperly as a result of the previous problem, you should simply be able to save it again to force the software to write the new code to the database. Once that is done, reload the table editor and you should be all set.

Thanks for the fix dev team
- This reply was modified 2 months, 4 weeks ago by photon43. Reason: Marking issue resolved

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.