Site Search: How to Make it Full Width in Flex Grid?

[Base12]

I placed the standard 'Site Search' feature into a Flex Grid.

When previewing the page, the Site Search is around 200 pixels or so wide.

How do I make it automatically fit the full width of the container and have it grow and shrink with RWD?

Here is a simple demo...

https://www.mostholyplace.org/misc/test ... oblem1.wbs

Interestingly, I can get a full width if I put the Site Search in a Layout Grid. It works perfectly.

Thanks!

[Pablo]

The Flex grid is based on flexbox, so normally you would have to adjust the flexbox properties.
https://www.wysiwygwebbuilder.com/flexbox.html

However, the search box currently does not support this functionality.

[wwonderfull]

I have done a checkup of your project. The input element which is the search is inside a form as it works using the on submit post method, so the form has to be responsive along with the input.

In that case to make it grow and shrink if you use below CSS it may bring the result you may have wanted.

Code: Select all

<style>
form#SiteSearch1_form {
    width: 100%;
}
</style>

More information on how to insert custom codes here
https://www.wysiwygwebbuilder.com/add_html.html

[Base12]

...the search box currently does not support this functionality.

Got it, thanks!

[Base12]

I have done a checkup of your project. The input element which is the search is inside a form as it works using the on submit post method, so the form has to be responsive along with the input.

In that case to make it grow and shrink if you use below CSS it may bring the result you may have wanted.

Code: Select all

<style>
form#SiteSearch1_form {
    width: 100%;
}
</style>

More information on how to insert custom codes here
https://www.wysiwygwebbuilder.com/add_html.html

Oh wow. It totally worked. The code was easy to implement.

I inserted the code into the 'Custom CSS' tab of the sitesearch object's HTML. I hope that was the right spot.

Here is the Header with Sitesearch before inserting the code...



Here is the Header with Sitesearch after inserting the code...



The Sitesearch now expands to fit the full width of the cell (set to be half the width of the Header) inside the Flex Grid.

It seems to conform to the RWD standards as well.

I have uploaded the entire website here in case anyone wants to test it out...

https://www.mostholyplace.org

Thanks for the help!