[Resolved] Missing css defs in wpv-view-output class when placed in a Kadence element

[Author]

Posts

[larsZ]

Hi,
I found an issue when placing a toolset view in a Kadence element.

The toolset view is wrapped in a wpv-view-output class which has an additional value: data-toolset-views-view-editor="61b1f5f26979787a8a3324bdef31c559" (in my case). This is used to specify the css of tb-grid class css within.

This works fine on a page or post. But when I place the view inside of a kadence element, the "data-toolset-views-view-editor" is still there, but does not specify the css of the tb-grid class.

In result, the view inside the kadence element is not properly rendered.

Please compare these two pages with the same view:
hidden link
hidden link

Best, Lars

[Luo Yang]

Hello,

I have checked both URLs you mentioned above, I can see below HTML source code in both URLs:

<div class="wpv-view-output awok-contacts" data-toolset-views-view-editor="5ae29ca41fefb5ec1ba0a5a73a70f613"
...
</div>

Is this problem resolved?

[larsZ]

Unfortunately it's not. When I place the view directly on a page, the tb-grid class holds the following css definitions:

.tb-grid, .tb-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid;
  grid-row-gap: 25px;
  grid-column-gap: 25px;
}

.wpv-view-output[data-toolset-views-view-editor="5ae29ca41fefb5ec1ba0a5a73a70f613"] .js-wpv-loop-wrapper > .tb-grid {
  grid-template-columns: minmax(0, 0.3333fr) minmax(0, 0.3333fr) minmax(0, 0.3333fr);
  grid-auto-flow: row;
}

The second css definition is missing, when I place the view in a Kadence element. That leads to the wrong rendering in the latter case (as on page test45).

[Luo Yang]

I have checked the page "test45" again:
hidden link

Now the HTML codes are below:

<div class="wpv-view-output awok-contacts" data-toolset-views-view-editor="066af6363ccce485ec3078076c2b3c03">

The attribute "data-toolset-views-view-editor" value is different.

And it is not recommended to use data-toolset-views-view-editor attribute to setup your custom CSS/JS codes, in your case, you can use the CSS class name "awok-contacts" to setup the CSS codes, for example:

div.awok-contacts{
/** Here setup your custom CSS codes **/
}

[larsZ]

My issue is resolved now. Thank you!