[Resolved] Views dont work as inteded Part 2

[Author]

Posts

[andyB-12]

Hey there, I already opened a ticket regarding this problem here: https://toolset.com/forums/topic/views-dont-work-as-inteded/page/2/

We were able to fix this issue for one site of the multisite network, but I just checked and it does not work for the other sites yet. I just updated an address for one post and the radius search does not work. Could you have a look how to fix this?

Here is the search that works:
hidden link

And on these sites it does not:
hidden link
hidden link
hidden link

The same problem occurs on another view:
hidden link

This does not properly work on any of the sites in the network yet.

Thanks!

[Christian Cox]

Sure, I'll take a look if you can provide a superadmin login for all sites here in the private reply fields.

[Christian Cox]

Looks like a different issue from what we first experienced. The issue here is the loop template is not being rendered correctly because of something to do with Divi. Divi is adding some CSS that hides each result. I was able to solve this on the suedhessen site by suppressing third-party filters in each loop template shortcode here: https://grashuepfer-suedhessen.de/wp-admin/admin.php?page=views-editor&view_id=51089

[wpv-post-body view_template="loop-item-in-ausflugtipps-suche" suppress_filters="true"]

Can you try this on the other sites? You must add the suppress_filters attribute to each loop template shortcode in the loop editor to suppress Divi's extra styles.

[andyB-12]

Great, this seems to work and all searches are working now for me.

But I have another problem with the loop on two searches.

As I am working with Divi and not the best way, it is somehow not possible that the 3 columns of the loop are displayed properly without adding custom code. I did that and it works fine on this page:
hidden link

But it does not work somehow on this one:
hidden link

Here the code I am using:

@media (min-width: 501px) {
.ausflug-ergebnisse td:nth-child(3n+0), .kindergeburtstag-ergebnisse td:nth-child(3n+0), .zuhause-feiern td:nth-child(3n+0) {
    padding-left: 16px;
}
	
.ausflug-ergebnisse td:nth-child(3n+2), .kindergeburtstag-ergebnisse td:nth-child(3n+2),.zuhause-feiern td:nth-child(3n+2) {
    padding-left: 8px;
    padding-right: 8px;
}

.ausflug-ergebnisse td:nth-child(3n+1), .kindergeburtstag-ergebnisse td:nth-child(3n+1), .zuhause-feiern td:nth-child(3n+1) {
    padding-right: 16px;
}

.ausflug-ergebnisse td, .kindergeburtstag-ergebnisse td, .zuhause-feiern td {
	width: 30% !important;
	padding-bottom: 30px;
	}
}

figure.tb-image {
    margin-bottom: 0px;
}

Could you please help me out?

[Christian Cox]

The difference here isn't so much the CSS or a conflict with Divi, it is related to the content displayed in the View's loop. Specifically, the link URL text for each item is very long, and does not break to mutliple lines very cleanly. For example, if you add similar long link URLs to the View here, you would see the same issue: hidden link

This is a common problem when link URLs are displayed in narrow columns, and usually even more apparent in German language sites where German words are often longer than their English equivalents.

A couple of options to address this:
1. Change the link text. Instead of displaying the full URL in the link text, display something else like the post title, or some other arbitrary text like "Visit site". This will help limit the length of the link text, and the line lengths will be shorter. This should help fix the column widths, since the content can break to multiple lines more effectively.
2. Wrap the link in a span or div tag that includes some CSS to help enforce shorter line lengths using word-wrap, overflow-wrap, text-wrap, ellipsis, etc: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

[andyB-12]

You are a genius! That was the problem. I just changed the link text to two words and now the columns are equal. But is it somehow possible to make the images align top? At the moment it looks a bit chaotic.

Thanks again! You are the best supporter on this platform by far! Opened a ticket for this twice already and your colleagues werent able to help me.

[Christian Cox]

Yes, it's a table View so the native browser styles for vertical-align in each cell default to "middle". You probably need to add the style override vertical-align:top; to all these td elements. You could target the styles with a CSS ancestor element, like a class applied to each View:

.ausflug-ergebnisse td {
  vertical-align:top;
}

You would have to apply the same ausflug-ergebnisse class to all the table Views, or set up CSS rules targeting each table View's td elements using different CSS classes applied to each View:

.ausflug-ergebnisse td, .second-table-class td, .third-table-class td {
  vertical-align:top;
}

[andyB-12]

I will check this out soon and inform you how it works.

Meanwhile another problem occured. After adding the supress-filters shortcode the styling I added in the loop editor of toolset is also supressed on three of four network sites.

On this one it works fine: hidden link

Here the styling is supressed:
hidden link
hidden link
hidden link

But on the other it does not. Could you maybe help me out, how to fix that?

[andyB-12]

The vertical-align: top worked fine! 🙂

[Christian Cox]

Can you explain how the Kindergeburtstag-Suche View is added to the page? If I "Scan content" on the View, I see that it is used in Body Layout: schwangerschaft. Is that a Divi module, or some other layout system? Where can I see this implementation in wp-admin?

[andyB-12]

The view is added via shortcode to a WordPress Page with the Divi Builder inside a Text module which could apply styling. Maybe it would be better to add it with the code module instead? But I dont know if that wont add any extra styling though. And I added the styling for the loop excerpt with the loop editor of Toolset.

[Christian Cox]

Well we recommend you do not mix Divi and Toolset elements on the same page, for compatibility reasons: https://toolset.com/course-lesson/using-toolset-with-divi/
That seems to be the case here, since you're displaying a View inside a Divi builder module. If you need this setup, it might be easier to remove the suppress_filters attribute and apply some custom CSS to override Divi styles that were hiding the results in the first place. If you want to remove the suppress_filters attributes from these templates I can take a look and see if there is a simple CSS override.

[andyB-12]

I deleted the supress-filters shortcode for these two searches now:

hidden link
Here the search does not work at all

hidden link
Here it seems that the search works

[Christian Cox]

I don't see a simple CSS solution that will solve the problem completely. You can add some code to override Divi's hiding CSS styles, for example:

.kindergeburtstag-ergebnisse .et_fb_fallback_content {
  display:block !important;
}

That code could be placed in the View editor on hidden link to fix most of the hidden results, but then there is a bigger problem where the first result is never displayed. That cannot be fixed with CSS, because the first result isn't hidden with CSS styles - the actual contents are not included in the result. This is a direct result of the compatibiity issues I mentioned before where Toolset and Divi elements are mixed in the page. Unfortunately there isn't a simple solution here because of those unresolved compatibility issues. Some possible workarounds I can think of:
- You could disable AJAX updates for this View to require a full-page refresh after a search, which might help prevent the issue where Divi manipulates the View results on-the-fly during a search
- You could replace the suppress_filters attributes and apply styles to the View results using CSS instead of the Block Editor configurations

[andyB-12]

Okay thanks for your help. So I could try to delete the supress shortcode and instead add some inline css to the loop editor and this could do the trick?