[Resolved] Filters layout breaks out when I choose an option from the select-type filter

[Author]

Posts

[nabils]

Hi
I am using Enfold/ CRED 1.6 / Types 2.0.1 / Views 2.0
I created a view with parametric search. In terms of functionality, all works fine.
My filter section is as follows:

[wpv-filter-start hide="false"] 
[wpv-filter-controls] 
[av_one_half first][wpv-filter-search-box][/av_one_half]
[av_one_half][wpv-control field="type-ad" url_param="type-ad" auto_fill="wpcf-type-ad" auto_fill_sort="asc" auto_fill_default="كل الإعلانات"][/av_one_half]
[wpv-filter-submit name="بحث" type="input" class="button"] &nbsp [wpv-filter-reset reset_label="إعادة" type="input" class="button"]<br><a href="<em><u>hidden link</u></em>"><font color ='#f37f3b'>أو بحث متقدم</font></a>
[/wpv-filter-controls]
[wpv-filter-end]

So you can see that I created 2 columns with Enfold shortcode and put each filter in one column (so that I get both filter side by side.
It displays as desired. However, when I select an option from the type-ad filter, the layout breaks before I press the search button, and although I have set the "parametric search setting" to " Full page refresh when visitors click on the search button". Please refer to the screenshot.

[Beda]

I somehow miss arguments in your code.

Can you show me in a ScreenShot the settings of the Filter itself, when you insert/edit it?
I assume you add the Filter with the GUI "Add New Filter."
Now you can put the mouse cursor on the wpv-control part and hit "edit filter"
Take a screenshot of that entire PopUp.

It should not happen that Styling / JS is lost especially if you set the filter to act only on Submit action.

Once I have that ScreenShot I see how you set this up and why the ShortCode argument is not present.

Can you also take a ScreenShot of the Browser Console when this happens?
The JS tab would be interesting, to see if any JS errors happen

[nabils]

Hi
here the console in Chrome (all errors about the arabic font I am using):
JQMIGRATE: Migrate is installed, version 1.4.0
hidden link Failed to decode downloaded font: hidden link
hidden link OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
hidden link Failed to decode downloaded font: hidden link
hidden link OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
jquery.js:3 Failed to decode downloaded font: hidden link
jquery.js:3 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
jquery.js:3 Failed to decode downloaded font: hidden link
jquery.js:3 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
static.addtoany.com/menu/page.js:1 Failed to decode downloaded font: hidden link
static.addtoany.com/menu/page.js:1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
static.addtoany.com/menu/page.js:1 Failed to decode downloaded font: hidden link
static.addtoany.com/menu/page.js:1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
hidden link Failed to decode downloaded font: hidden link
hidden link OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
hidden link Failed to decode downloaded font: hidden link
hidden link OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
hidden link Failed to decode downloaded font: hidden link
hidden link OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
hidden link Failed to decode downloaded font: hidden link
hidden link OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

and here the console in Firefox is attached in 2 images

[Beda]

1. Query Filter
Why this?
Because you inserted a Search Box to the Parametric Search Section.

2. Filter 1
This can not be.
Your Code you showed me, is not produced by this Settings, this is impossible.
If you create the Parametric Search ShortCode for this Custom Field as you show me in the ScreenShot the ShortCode would look similar to the below:

[wpv-control field="your_field" url_param="your_param"]

Your's looks different, and that seems to me manually edited?
Please do not manually edit those ShortCodes, but instead, use the GUI.
This ensures correctness of the Filters.

3. The errors in the console as seen in your ScreenShot to me do not seem to be related to any Font issue.
Those are AJAX issues, JS conflicts and outdated scripts.

To solve this:
1. Insert the Filter (best after completely deleting it) again with the GUI.
2. Use a WordPress Default Theme and NO Plugins BUT the Toolset Plugins.
Then re-enable the Plugins one after the other (only the very needed ones in order to have the layout working), and reactivate your Theme, but still with an absolutely minimal set of Plugins and code.

Please use a Fresh Download of your Theme, not a Child theme.

The issue should then be solved.
I do not think this problem is related to Toolset's malfunction as the errors are coming from other places.