question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No way to make search input fluid

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
Rohanhackercommented, Jan 5, 2017

#1123 should fix this (my first PR)

screenshot from 2017-01-05 14-01-04

screenshot from 2017-01-05 14-01-35

0reactions
brianespinosacommented, Mar 15, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fluid input elements - css - Stack Overflow
I'm looking for an easy way to make the input fields fluid so that the width of input elements is always relative to...
Read more >
Semantic-UI Input Fluid Variation - GeeksforGeeks
fluid : This class is used to create fluid input. Syntax: ... < input type = "text" placeholder = "Search here" >.
Read more >
Fluid Width Search Box - CodePen
Fluid Width Search Box ... Basically, this is just a simple fixed-fluid layout implementation. The problem for implementation with form elements is that,...
Read more >
Search | Semantic UI
A search module allows a user to query for results from a selection of data. ... Fluid. A search can have its results...
Read more >
Responsive design - Learn web development | MDN
HTML is fundamentally responsive, or fluid. If you create a web page containing only HTML, with no CSS, and resize the window, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found