Search code examples
javascriptsearchsemantic-ui

How do I show Semantic UI category headers as an item in the search results list?

I have a semantic ui search field which is working correctly. But the category names are rather long, and having them on the left is taking up a lot of space. I'd like the category to appear as another item in the same list, just styled differently. Something like this, where the gray headers correspond to the item categories (source):

enter image description here

I don't see a way to make this change when the component is initialized. How can I do it?

Solution

  • It turns out that this is quite straightforward to change, and it can be done entirely in CSS. The key is to change the divs that make up the suggestions popover from display: table-cell to display: block and give them a width.

      .ui.category.search>.results .category {
      display: block;
      width: 100%;
  }

  .ui.category.search .results {
      width: 600px;
      width: 100%;
  }

  .ui.category.search>.results .category>.name {
      display: block;
      width: 100%;
      white-space: normal;
  }

  .ui.category.search>.results .category .results {
      display: block;
      width: 100%;
  }

  .ui.category.search>.results .category .result {
      display: block;
      width: 100%;
  }

  .ui.search>.results .result .description {
      width: 100%;
  }

    Update: You can now use the "horizontal category" option to achieve this.