Semantic-ui-react: No clear way to make the "Search" component fill the width of its container

[tashburn]

The problem

The "input" property suggests it could somehow be set to make the

component fill its container. But it's unclear what that setting would be (), and I don't see it doing anything in the code either.

What I want

The existing "fluid" property (

) makes the _search results_ fill the container, not the input field itself. That's an inconsistent meaning for the property "fluid", which is used in other components to make the component itself fill the width of its container. I propose that make the component fill its container's width, and make the search results fill it's container width. That's more consistent and clearer to use.

Possible solution

It seems that a Search component property (like repurposing "fluid") just needs to be passed as the Input property "fluid" in the renderSearchInput function.

Version

2.2.2

[levithomason]

Duplicate https://github.com/Semantic-Org/Semantic-UI-React/issues/1104

<Search input={{ fluid: true }} />

[levithomason]

Sidenote, looks like you need to use some backticks ` around your code when commenting. Otherwise, GitHub tries to render it as HTML.

<strong>Like this</strong> instead of like this.

---

[tashburn]

Thanks for the suggestion on the backticks. I'm glad there's an existing solution for this. I'd suggest updating the documentation for the Search component's input property to make this clearer -- something like: "Pass properties to the input component (e.g. input={{ fluid: true }})"

[levithomason]

Yep, PRs welcome! There are a lot of great ideas lying around here waiting for willing and able hands :)