Search input field doesn’t stretch to fill the container

  • AJAX Search Lite, regardless of which layout skin I choose, I notice that the search box is only clickable for the first half where the placeholder text is. The input field doesn’t stretch all the way.
    The reason I mention this is that some users thought the search was broken. Ideally the search field should cover more of the container.

    Since I don’t need the autocomplete functionality I used a CSS workaround:

    #search-drawer .drawer-inner form {flex-direction:column;}

    But maybe there is a better solution?

    The page I need help with: [log in to see the link]

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

    (@wpdreams)

    Hi,

    There is probably an inherent 3rd party CSS rule, which may add a max-width or some other means to limit certain form or input lengths in specific locations.

    Can you share a URL where I can check this out?

    All the best,
    Ernest

    Thread Starter jorix

    (@jorix)

    Working local here, but I encounter the issue when using the free Kadence Theme in combination with AJAX Search Lite. Easy to replicate though:

    1. With Kadence theme installed: Customizer > Header > add search widget to header.
    2. In AJAX Search Lite settings, enable “Try to replace default search”

    On the frontend, when clicking on the search icon, an overlay will appear with the ASL search box. The first half is clickable and sets the focus. The second half isn’t clickable (except for the button).

    Plugin Author wpdreams

    (@wpdreams)

    Thanks, I tried, this is the custom CSS I recommend:

    .proinput form {
    display: block !important;
    max-width: unset !important;
}

    This will resolve the issue.

    All the best,
    Ernest

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Search input field doesn’t stretch to fill the container’ is closed to new replies.

Tags