Search styling is confusing

[Web DevParticipant]

Styling of the search icon, input and results is really messy.
There are settings in different tabs and it’s impossible to remember where to change what.
Also, styling is not flexible enough.

1.
What I want is the icon to NOT have any border and sit together with the rest of menu items (not higher up).
I want a bottom border ONLY on search input field.
Currently this cannot be done, because if I remove the border around the icon, it gets removed also from the input field.

2.
Result box width should be separated from input box width.
I want search results to be full width, under the menu, horizontally.
Currently the search results box width is linked to search input…….
Ideally, the results from Header search, should appear full width under the menu in header… not below input field.

3.
It would be great to have a “customizer” for search results.
The current options aren’t flexible enough. I would like results to be divided in tabs (each tab can be eg. Brands, Tags or Product categories – that I already set as grouping logics in the plugin).

It’s hard to control styling through css, because the plugin creates an incredibly complex html structure…. is there no way to simplify it a little?!
I thought the plugin would help making a nice search tool… but it’s taking forever just to understand each small setting… and it’s not coming along as planned.
Please help on making the search like here .

Thank you

[Ernest MarcinkoKeymaster]

Hi,

1. I believe for this purpose using a custom CSS is much more efficient, as the sizing of the items within the input container follows a flexible (display:flex) display property, and the box-sizing does not contain borders within the overflow by default.
After disabling the borders (on the underline theme it is box shadow, you can disable it here) on the back-end, try this custom CSS to apply a border on the input part only:

.asp_m .proinput {
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;
    border-color: #000 !important;
    box-sizing: border-box !important;
}

This resulted on my end to something like this: https://i.imgur.com/cOPHACw.png

2. Unfortunately as simple as this sounds, it is very complicated programatically. The results box by default is moved to the document body scope, in order to make sure that any other container element, that does not have an ‘auto’ overflow, does not make the results box invisible, by clipping it. Automatically detecting the menu DOM node position without further information is programatically impossible, that is why the input field is the reference for the results container display.

It is however possible to tweak the results potion as well as the width by using custom CSS. To change it’s minimum width, you can use this:

.asp_r {
    min-width: 320px !important;
}

Just change the width pixel number to your needs.
It is also possible to push the reuslts box vertically, by forcing a top margin to it. In your case a lower value, somewhere around 4 pixels should do the trick:

.asp_r {
    margin-top: 4px !important;
}

3. I completely agree with a customizer for sure. I am constantly working on all plugin features to make it as simple as possible, but as you can see there are lots of options available, and it is not easy to organize them, especially considering older plugin installation compatibility.
This is the main reason I cannot quickly add a customizer feature, as for new installations it would work, but all the previously installed copies (over 9000) need to work as well, and that transition is very difficult and time consuming. I really hope I can implement such feature in the next upcoming months.

The search on the given URL is completely custom made with very different features. The only way to replicate that is to custom code it, which can be very expensive and could take a lot of time. While tabbed results are not available, you can try the results grouping feature, which allows separating results by criteria.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Web DevParticipant]

I understand that adding new stuff can cause legacy issues, but currently it’s really not practical….
I think I have achieved some sort of acceptable results for desktop, but for mobile, it doesnt work.

Mobile Issues
I added the shortcode to the template, through JS, so that it would add the search icon right before the hamburger icon.
I set this specific search box as active only for mobile, but I still can’t see it (using Chrome responsive inspector set to iPhone X).
I can see the code is added to the source, but nothing shows.
Can you please help by fixing it from my backend and explain how to make this work?
It’s really frustrating not being able to make this work without help…………

Translation Issues
I have translated from WPML the labels and placeholder it finds… but they always show up in English (which is always the default lang for WPML to translate strings)

Thank you for your help

[Ernest MarcinkoKeymaster]

Hi!

Mobile Issues
I have checked the menu source under mobile inspection panel. It appears, that the mobile script moves the plugin output from a menu element to a link data-title attribute for some reason. That is unfortunately a menu issue, as the plugin has not effect on this behaviour. I guess it is to do some sort of animation/compatibility trickery within the menu script, but it’s a very bad practice to move DOM nodes from one place to another, as it not only creates parsing issues, but the registered event handlers are de-registered – meaning that placing any interactive element to the menu will most likely be broken.
I suggest checking the menu configuration, maybe there is an option to stop this behavior, so it simply prints out the plugin output, without moving it to attributes, or altering it in any way.

Translation Issues
I checked the WPML translations list, but the placeholder text seems to be untranslated there, for search instance 3 and instance 1. Search no. 2 is translated, and it shows the italian for me on the front-end.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Web DevParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi,

That search was not visible, because the CSS file including the styles is cached by the site, and the server is pushing an old version of it – thus it does not contain the 3. search instance.
To bypass that issue, I have enabled the inline styles option on the plugin back-end here. Now the search box is properly displayed: https://i.imgur.com/gpQzvio.png
Once all the cache is properly cleared, you can turn off this option, and you should see the same layout as now. If it’s different, then the cache is not cleared. I highly recommend turning off all layers of cache until the site development is finished, it will conflict with any asset files, scripts/styles as well as page layouts. Please note, that caching is not something the plugin can control in any way. I am seeing a very aggressive cache on the front-end, even the media query strings are removed from the asset files. I am not sure if that is server side, or CDN, but in case you have that cache control on cloudflare/other CDN, I suggest temporarily disabling it until the development is finished.

I am honestly trying to help you out here, even though the problem is unrelated to the plugin itself. I know implementing/changing things on a website can be frustrating, and often times the cause of the problem is something else. If you turn off all the cache until you finish the changes on the site, you should see the changes immedately, and these kinds of issues will be less frequent.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts