Results width

Hi @benniledl ,

I would like to clarify that SearchWP Live settings does not include an option to position the button directly inside the search input field. Could you let me know how this button position has been set? This will help me look into the configuration more closely.

Also, by default, the live results container width aligns with the search input width. If you’d like the results container to span the entire width of the form wrapper, you can add custom CSS to your theme’s stylesheet to set a specific width for the results container. For example:

.searchwp-live-search-results-showing{
	width:500px!important; /* Adjusts to fill the wrapper */
}

Hey @kjswp

Sorry, I mean the normal Gutenberg search block. This block button has the option to show the button inside the search form.

Copy and paste this json to insert the block into your testing site:

<!-- wp:search {"label":"","placeholder":"Suche","buttonText":"Suchen","buttonPosition":"button-inside","buttonUseIcon":true,"style":{"border":{"radius":"47px"}},"backgroundColor":"contrast-2"} /-->

The Plugin SearchWP has the Setting “AutoWidth” this automatically aligns the results panel width with the search form width, but it should ideally include the button’s width too.

Thank you for the additional information.

I would like to clarify that the Auto-width setting simply sets the width of the live results container to match the search input field. It does not include the button.

I tested the WP search block with the “button inside” option. However, in the final HTML, the button actually appears next to the input field, not inside it; it only adds an extra container around both elements.

Currently, there isn’t a built-in way to extend the width of live results to match the entire search form wrapper.
If you need any other information, then please let me know.

Hi Benedikt,

We haven’t heard back from you in a while, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!