margin-left is -4px for search – hides start of search box

[ajmccannParticipant]

After 4.12 update (maybe) my search boxes are suddenly skewed a few pixels left. See https://www.11trees.com/live/support/.

Looking at the CSS I see:

#ajaxsearchpro4_1 .probox .proinput input.orig, #ajaxsearchpro4_2 .probox .proinput input.orig, div.asp_m.asp_m_4 .probox .proinput input.orig {
margin-top: -1px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: -4px !important;

Why is there a -4? This seems to be introduced by Ajax Search, not my theme…but this is not my strong suit to debug:)

[Ernest MarcinkoKeymaster]

Hi,

That CSS is actually intented, and is correct, as on the parent element there should be a “0 0 0 10px” margin an “0 5px” padding. However these values are overwritten by higher specificity CSS rules from the frontend-builder-plugin-style.css file, which I’m guessing belongs to the font-end builder plugin.
It resets some of the margins to and paddings to 0, and the text alignment on the icon containers. This custom CSS will resolve all of these problems:

.proinput,
.proinput * {
    box-sizing: content-box !important;
}

.proinput {
    margin: 0 0 0 10px !important;
    padding: 0 5px !important;
}

div.asp_m.ajaxsearchpro .probox .promagnifier .innericon,
div.asp_m.ajaxsearchpro .probox .prosettings .innericon,
div.asp_m.ajaxsearchpro .probox .proclose .innericon {
    text-align: center !important;
}

I guess I have to consider adding these rules to the higher compatibility CSS generator script for the upcoming release, to make sure they overwrite the default rules from that page builder.

I hope this helps!

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

[ajmccannParticipant]

Yes! Thank you…

I use Divi, which has been updated quite a bit recently…

[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