How to align search box w/ css max-width with rest of content container?

  • We try to add shortcode for search box inside of a div. We want to control the max-width of search box 600px using inline style. When we do this, the search box is no longer aligned on the left with the rest of the content in the container on page. The search box moves off to the right. The width is good but there is a white space (margin or padding?) that is to the left of the search box. We try using float:left; but that makes box go too far left. We just want to control the max width of the search box and have it align on the left in the container with the other blocks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author wpdreams

    (@wpdreams)

    Hi,

    Can you add a link where I can take a look at the issue? The alignment will depend on the containing elements as well, so if any of them are set to flex or are in a relative/absolute position or have specific margins it will affect it. The search box itself aligns with the content, which is to the left by default.

    If you add a link to the page I will most likely be able to tell.

    All the best,
    Ernest

    Thread Starter wordmax

    (@wordmax)

    Ok I put together a demo you can see. Can I send you the link privately? Let me know how to send. I wish wordpress would make a feature on plugin support forum where we can quickly easily share links private with the plugins devs

    Plugin Author wpdreams

    (@wpdreams)

    I’m afraid there is no way to do that here, and I am not allowed to ask for any private details whatsoever as by forum rules either.

    All the best,
    Ernest

    Thread Starter wordmax

    (@wordmax)

    Ok, here is a temp demo link you can see behavior of search box position. When we try to set div style width that contains the [wpdreams_ajaxsearchlite] shortcode, the search box no longer aligns on left with the rest of the content. If we just use the shortcode and no css for the div width, then the box aligns on the left with the content. So how can we control the width of the search box while keeping it aligned on the left with the rest of the content?

    temp demo link:

    https://xyzya.com/aslwp/

    Plugin Author wpdreams

    (@wpdreams)

    Thanks, that helps!

    The container element (the div with the 600px width) has an auto inline margin, which means it’s centered. It’s not the search, but that CSS rule, which affects all inline elements within the entry content. If you add a fixed margin or unset the margin to that element it will resolve the issue.

    All the best,
    Ernest

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.