Open In App

Semantic-UI Search Fluid Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Search is used to allow the user to search different things on the website. The search can help to search blogs, tools, other links, etc. Semantic UI Search Fluid Variation enables the search results to take the entire width of its container.

Semantic UI Search Fluid Variation Classes:

  • fluid: On adding this class, the search results take up the width of its container.

Syntax: Add the fluid option to the Search element as follows:

<div class="ui fluid search">
    ...
</div>

Example: In the following example, we have the search of fluid type.

HTML




<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link href=
          rel="stylesheet"/>
    <script src=
    </script>
    <script src=
    </script>
  </head>
  <body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1>
            GeeksforGeeks
          </h1>
        </div>
        <strong>
          Semantic UI Search Fluid Variation
        </strong>
      </center>
      <div class="ui segment">
        <h1>Welcome to GeeksforGeeks</h1>
        <p>Find the best programming tutorials here.</p>
        <div class="ui fluid search">
          <div class="ui icon input">
            <input
              class="prompt"
              type="text"
              placeholder="Search tutorials..."
            />
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
    </div>
    <script>
      var tutorials = [
        { title: 'Data Structures' },
        { title: 'Algorithms' },
        { title: 'Machine Learning' },
        { title: 'Web Development' },
        { title: 'Competitive Programming' },
        { title: 'Java' },
        { title: 'C' },
        { title: 'C#' },
        { title: 'C++' },
      ]
      $('.ui.search').search({
        source: tutorials,
      })
    </script>
  </body>
</html>


Output:

Semantic-UI Search Fluid Variation

Semantic-UI Search Fluid Variation

Reference: https://semantic-ui.com/modules/search.html#fluid



Last Updated : 11 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads