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 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 5 years, 6 months ago.
Assisted by: Christian Cox.
- 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?
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".
