Skip Navigation

[Resolved] Search Filter and Content Template Layout broken

This thread is resolved. Here is a description of the problem and solution.

Problem: The design and layout of my search filters is broken in some cases.

Solution: Make sure the HTML markup structure is identical in all cases.

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by andrewF-6 5 years, 5 months ago.

Assisted by: Christian Cox.

Author
Posts
#1270349

I am trying to:
Determine why that in spite of the code being the same my Search Filters and Content Template layouts are broken on two specific pages on my site.

Link to a page where the issue can be seen:
A. The filter design and layout on both pages should be the same since the code is the same.
- The layout of the filters at the top of this page is wrong: hidden link
Expected Filter Design - It should resemble the layout of the filters on this page: hidden link

B. Though the data is different the layout and design of both of these pages should be the same as they are from the same Content Template!
- Corrupted Content Layout Template: hidden link
Expected Layout Design - Normal and correct Content Layout Template: hidden link

I would appreciate any CSS or other plugin advice to have consistent results in the output. I have no idea why the results differ because for a time they were similar and appeared as correct on the site.

#1270705
filters1.png
filters2.png
template1.png
template2.png

- The layout of the filters at the top of this page is wrong: hidden link;
I'm attaching screenshots showing what I see in Chrome on a Mac laptop (filters1 and filters2). The problem I see is that the submit and reset buttons are overlapping. Am I missing anything else? If so, what browser are you using? Are you on a phone or other device?

A. The filter design and layout on both pages should be the same since the code is the same.
That's not really accurate, because you must also consider the context where the code is placed. If you place the same code in one area of the site, it may not behave exactly the same way in another area. In this case, the amount of horizontal space available in the parent container is a major factor in the way filters are rendered.

B. Though the data is different the layout and design of both of these pages should be the same as they are from the same Content Template!
We must be looking at different things. Can you clear your browser cache and try again? I'm attaching screenshots showing what I see in these two posts (template1 and template2). They are formatted very much like each other, so maybe I'm missing something. Are you testing on a small screen or device? A specific browser?

#1270751

Dear Christian,

1. With regards to the filters: "The problem I see is that the submit and reset buttons are overlapping. Am I missing anything else? If so, what browser are you using? Are you on a phone or other device?" That is indeed the problem.... then filter buttons are overlapping.

Do you have any solutions?

I am using Chrome on a laptop that is also connected to a large screen.

2. With regards to the content templates your screenshots are displaying the templates accurately. So the problem may be elsewhere... I will double check on more device at my end.

Thanks

#1270863
Screen Shot 2019-06-17 at 12.07.04 PM.png
Screen Shot 2019-06-17 at 12.07.12 PM.png

If you check the WordPress Archive and the View, you can see that the markup structure for the filters is not identical. You should probably change the archive's filter markup structure and layout to match the View. Try adding a wrapping div around the column divs and give it a class of "row".

#1270895

Thanks to Christian the issue is resolved now. The issue related to incorrect markup in the archive code. Thank you!