-1

Is it possible to make the length of the search bar wider? I am not talking about the actual size because there is a size property, just length.

Also, the defaultValue in Search doesn't seem to work at all, is it just me? The code I am using is basiclly a copy paste of this one: https://react.semantic-ui.com/modules/search/#types-category I just added:

let defaultValue = "Search"

before the render and my Search call is like so (Added the defaultValue part that doesn't show)

                <Search
                    defaultValue={defaultValue}
                    category
                    loading={isLoading}
                    onResultSelect={this.handleResultSelect}
                    onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
                    results={results}
                    value={value}
                    {...this.props}
                />
Contentop
  • 1,163
  • 3
  • 20
  • 43
  • do you want to increase the width of the search bar? – Arun AK Dec 30 '18 at 12:52
  • can you share the code so that it will be easier to solve it? – Arun AK Dec 30 '18 at 12:55
  • Yes I want to increase the width of the search bar. Editing now but my search bar is basiclly a copy paste of the Catagory one on Sematic-UI-React website: https://react.semantic-ui.com/modules/search/#types-category – Contentop Dec 30 '18 at 13:08

2 Answers2

4

You can do something like this:

  1. set the value attribute like value || defaultValue - This will set the default value for the search field if the value is empty

  2. Set a class name to the search component and change the width via css

 <Search
        className="search-bar"
        loading={isLoading}
        onResultSelect={this.handleResultSelect}
        onSearchChange={_.debounce(this.handleSearchChange, 500, {
          leading: true
        })}
        results={results}
        value={value || defaultValue}
        {...this.props}
      />

.search-bar{
  width: 500px;
  .input{
    width: 100%;
  }
}

Here is the live demo

Hope it helps :)

Arun AK
  • 4,353
  • 2
  • 23
  • 46
  • It does help :) 1 is a nice idea but it's not perfect as you can see for yourself, when you press on the search bar the default value does not erase it self, I will probably need to have the default value in the state and when I press the search bar the event will set the state to "". 2 is awesome, I don't have any css files and I wouldn't want to add 1 just for that, I will look into how do this with styled components, thanks! – Contentop Dec 30 '18 at 14:32
0

Yes, we can adjust search bar length by changing padding size in style.

.search-bar{
padding-left:50px;
}
Akshay R kylm
  • 1
  • 1
  • 1