Semantic-ui-react: No way to make search input fluid

[wallslide]

http://react.semantic-ui.com/modules/search

There is a fluid property on the Search component, however that only affects the search results that appear below the input. I'd like to make the input itself take up the width of its container. This can be accomplished by making the underlying input a ui fluid input as mentioned here.

I think the easiest fix is to add another boolean property called fluidInput to the Search component to control this behavior.

[levithomason]

I see. Perhaps we should accept a shorthand prop to configure the Input child component:

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

[Rohanhacker]

1123 should fix this (my first PR)

[levithomason]

Fixed in #1123, thanks!

[kunokdev]

How do we find possible values for this prop (input @ Search) other than searching within issues?

[brianespinosa]

@kunokdev the available props for all components are located in the documentation: https://react.semantic-ui.com/modules/search

[kunokdev]

@brianespinosa I think you misunderstood me.

Default value is text string, while solution to this was object: { fluid: true }.
What else is possible? Here we simply can't know what is possible, object? string? which string values? probably 'text', 'number'...oh what? Actual solution is object? There are infinite possibilities for object values...which ones do we use? How do we get to know that other than searching issues? Is there some list of possible values?

[brianespinosa]

@kulakowka I see what you are saying. With shorthand props like input they are referencing another SUIR component. So in this case, the Input component (https://react.semantic-ui.com/elements/input) would be the place to look for the available props. Looking at this in the docs, I agree that it could be helpful to show this.

@levithomason what if we added links next to these props in the docs to the component that they are referencing to make it easier to follow? Or would that break the way the docs are built currently?

[levithomason]

Yes, we need better shorthand docs support. I think ideally, we'd have some kind of walkthrough tutorial for users to get familiar with them. They are one of the central parts of this library.

We have a very old issue, #561, for adding some kind of dedicated shorthand docs. I would support any improvements in this area. What I ask is that it is consistent across all components and clearly communicates how the idea permeates the library.

[milkers]

I have a header for my app. And it is a menu with many items. I have a menu.item which wraps an input field (its purpose is to search the given input side-wide). I want that menu.item to be as wide as the remaining space with input field as its children. My problem is very similar to this visually. And yes, I have tried fluid prop in many permutations, unfortunately it did not help. Any help or insight on this problem? My Sample code is below;

  <Menu inverted={true} fixed="top" size="small" color="violet">

    <Menu.Item as="a" header={true} onClick={this.handleHeaderClick}>
      <Icon inverted={true} size="big" name="image" />
    </Menu.Item>

    <Container fluid={true}>
      <Menu.Item >
        <Input
          inverted={true}
          transparent={true}
          icon="search"
          iconPosition="left"
          placeholder="Search.."
        />
      </Menu.Item>
    </Container>

    <Menu.Item as="a" header={true} position="right">
      <Icon inverted={true} size="big" name="mail" />
    </Menu.Item>

    <Menu.Item>
      <Dropdown
        trigger={trigger}
        options={options}
        pointing="top right"
        icon={null}
      />
    </Menu.Item>

  </Menu>

Thanks.

[brianespinosa]

Hi @milkers please refrain from commenting on old, resolved issues with usage questions. If you find a bug, please create a new bug report. For usage questions like this, please post to Stack Overflow.