Search Bar is displayed wrong!

[Jan TrierParticipant]

Hey Guys,

As you can see in my two last support tickets, I have problems to display the search bar right…
I tried it with demo version of the ajax search bar. There is has worked. But now, with the full version, it is not working…

I didn’t care about this problem the last weeks because I had a lot to do. But at the moment, this is the only thing which is detaining to go live with my website. In the settings, the search bar appears right! – Check it out with the preview in the search bar settings!

But why the hell doesn’t the search bar appears right? – I deleted the plugin, purged my user cache, purged the server cache AND created two new search bars as you can see on the two increased search bar ID’s. But still, same problem…

How can I repair that or can you see any error? – Try yourself. You have the login data!

Here is the navigation search bar code before I changed it to the ajax search bar from the theme:

<?php 
$mobile = get_field('design_nav_mobile_searchform', 'option'); 
$desktop = get_field('design_nav_searchform', 'option'); 
$classes = array();

if('1' != $mobile) { 
	$classes[] = 'hidden-xs'; 
}

if('1' != $desktop) {
	$classes[] = 'hidden-lg hidden-md hidden-sm';
}
?>
<form class="navbar-form navbar-right form-search <?php echo implode(' ', $classes); ?>" action="<?php echo esc_url( home_url() ); ?>">
	<div class="input-group">
		<input type="text" class="form-control" name="s" id="name" placeholder="<?php echo __('Suche nach' , 'affiliatetheme'); ?>">
		<span class="input-group-btn">
			<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
		</span>
	</div>
</form>

And here after I changed it to the ajax search bar:

<?php 
$mobile = get_field('design_nav_mobile_searchform', 'option'); 
$desktop = get_field('design_nav_searchform', 'option'); 
$classes = array();

if('1' != $mobile) { 
	$classes[] = 'hidden-xs'; 
}

if('1' != $desktop) {
	$classes[] = 'hidden-lg hidden-md hidden-sm';
}
?>
<form class="navbar-form navbar-right form-search <?php echo implode(' ', $classes); ?>" action="<?php echo esc_url( home_url() ); ?>">
	<div class="input-group">
        <?php echo do_shortcode('[wd_asp id=3]'); ?>
	</div>
</form>

But as you can see. Even the search bar which is displayed in the middle of the page and is inserted with the php snippet, doesn’t work!

I would be very grateful about help!
Greetings and Thank You!

• This topic was modified 7 years ago by  Jan Trier.

[Ernest MarcinkoKeymaster]

Hi!

The main problem there is that the search is placed within a form element, which yields an invalid HTML output – because the search itself has a form element to store the fields. A form within a form is not allowed in HTML, and as the browser tries to correct it, will cause more issues.

One possible solution could be to change the outer form element to a DIV element, like so:

But this still might not fix the layout issue, but at least the HTML is parseable now. Header elements are usually flexible, simple text elements, and does not work well with ‘%’ value widths, so they are simply shrinked. So, I recommend changing the search bar width to a pixel value, like so: https://i.imgur.com/pN9X6LQ.png

This may not solve the issue completely, but at least make a progress in the right direction.

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

[Jan TrierParticipant]

I changed it as you said but I still have the same error…
How can I fix that? – Without fixing it the plugin is useless for me!

Maybe we should concentrate on the main search bar at first.

What I do not understand is, that everything has worked with the free ajax search bar plugin. But the paid plugin doesn’t work?

[Ernest MarcinkoKeymaster]

Hi,

Make sure to clear all caches, including cloudflare. The settings are in effect, but because of cache it’s not propagated to the front-end. I usually turn off all caching (including CDN) when making adjustments to site layouts, as it’s not predictable when the assets are cleared from cache.

I can see the 200px widht for the navigation search in the stylesheet file, but the front-end is served an older one. After clearing all layers of cache, this will be visible.

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

[Jan TrierParticipant]

Okay, thank you! – Is now working! 🙂

But I have one question left! – Is there a way to highlight only the headings of the searches instant of everything?
Because I show the price in the description and the price gets also highlighted if I search e.g. “sniper 3”.

So, I only want to highlight the headings/titles – Is that possible? – If yes – How?

Greetings!

[Ernest MarcinkoKeymaster]

Hi!

There is no option for that, but it’s actually possible, by adding one small custom CSS snippet:

.asp_content b span.highlighted {
    color: inherit !important;
}

This will make sure that the highlighted text inherits the color from its parent – therefore it won’t be visible in the content.

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

[Jan TrierParticipant]

Thank You a lot Ernest Marcinko!
You are the best supporter I got to known during my project! 🙂

Really, Thank You! 🙂
Greetings
Jan

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts