Wrappin the search results in a scrollable container

[cemremengu]

Currently when there is a lot of search results, the content goes down infinitely. Is there a way to restrict the size of results container and make it scrollable instead ?

[jeffcarbs]

Semantic-UI-React only concerns itself with React components that generate valid Semantic-UI markup. There is no HTML nor CSS code in this project.

Semantic-UI core (https://github.com/Semantic-Org/Semantic-UI) does not provide styling for scrollable search results, so you'll have to raise an issue with them. For what it's worth, looks like this issue was already raised (Semantic-Org/Semantic-UI#3389) and closed but you can certainly try again.

[themre]

don't know how much is this used but getting 40 items stretch over the viewport seems not very nice. we could add maxResultsHeight prop to add max-height CSS property on result holder and also add overflow: auto so remove this kind of behaviour. it seems that wrapper was provided but you need to always add this hack into your css.

[levithomason]

I'll try to shed some light on why we don't include any styles this library.

Semantic UI is the most themeable CSS framework there is. The proper solution here is to customize your theme variables to handle this, or, even add an override style to your theme. This way, the styles are context aware of the rest of your theme.

We don't add styles in top of the theme for several reasons. One, we wouldn't know what values would work for all themes. There are dependencies in the LESS that when it is compiled down to CSS. Another reason is that online styles override stylesheet rules, so, if a user loaded a theme with a particular style, our components should respect those and not override them. Yet another is that it adds unnecessary weight, the themes are already completely customizable so the changes should happen there.

All said, we have theming in mind for this library as well. Feedback encouraged #1009

[vmundhra]

.search .results {
overflow-y: auto;
max-height: 300px;
}

[tom-wagner]

To piggy back on @vmundhra's comment, as of Semantic UI React version 0.78.1 I used the following:

.ui.search > .results {
  overflow-y: auto;
  max-height: 550px;
}

[rakeshhotker]

how to save this patch to be able to share it with others