Magnifier icon moved to left

[Steve Strutt]

Hi Ernest, on my search results page, the magnifier icon has moved to the left of the search box. The option magnifier position in themes and styling is set to display on the right and where the input and settings short codes are used on an standard WordPress page the magnifier is displayed on the right.

But on the WordPress TwentyTwentyFive search results template it is displayed on the left. It has been like this for a few weeks, though when I started out it was on the right. I disabled all other plugins but it remains on the left, which rules out a CSS conflict.

[Ernest Marcinko]

Hi Steve,

May I take a look at the issue somewhere? I can probably tell just by looking at the page.

[Steve Strutt]

Search on anything on this page to get to the search results page: https://swop-demo.co.uk/advanced-search/

[Ernest Marcinko]

Thank you! I see the problem.

On the results page, there is an empty paragraph injected to the search, right before the button, so the CSS doesn’t apply properly. This usually happens the the search is placed into text module instead of a shortcode module (or not it’s own module).

Can you please check if you can replace that block with the ajax search pro search block? My guess is, that right now it might be a text block with the search shortcode or something similar.

[Ernest Marcinko]

Forgot to add, if it’s not possible to change, no worries, this custom CSS will resolve it either way:

.probox p:has(.promagnifier) {
    order: 5;
}

[Steve Strutt]

Curious. The search box is in a shortcode. Added to the default TwentyTwentyFive search results template. See below.

I added the CSS class and it moved the magnifier to the left, but not to the end. The text clear button and loading icons still appear at the end. I added order 4 for both proclose and prolaoding without any effect.

[Ernest Marcinko]

I see, not sure why the output is altered though, shortcode blocks should return them as is. There is probably a wp_kses hook somewhere forced on the full output, as I see multiple similar paragraph wraps on the rest of the page. It’s not a big deal, but for some reason it happens.

Either way, my mistake with the custom CSS, the order value should be 9:

.probox p:has(.promagnifier) {
    order: 9;
}

This will resolve it.

[Author]

Posts