Semantic-UI Dropdown Compact Variation
Last Updated :
23 Feb, 2022
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is “Dropdown”. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. There are different variations of dropdowns based on menu direction and the way it shows up.
Semantic UI Dropdown Compact Variation: The user might need to set the width of the dropdown as per the selection made. This is when compact variation comes in handy. There is no minimum width for this dropdown. The dropdown width changes as the user make his selection. There is no fixed width and it helps in setting width automatically as per user choice.
Semantic UI Dropdown Compact Variation Class:
- compact: This class is used to specify the compact variation of the dropdown.
Syntax:
<div class="ui compact dropdown">
...
</div>
To instantiate the dropdown function, use the following syntax.
<script>
$('.ui.dropdown').dropdown();
</script>
Example 1: This example demonstrates the powers of 10 through the dropdown compact variation using the compact class. You can see as the user chooses lesser powers of 10, the width of the dropdown keeps on decreasing.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green"> GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown Compact Variation</p>
</b>
<hr><br />
<strong>Compact Dropdown:</strong>
<br /><br />
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">Powers of 10</div>
<div class="menu">
<div class="item">100000000</div>
<div class="item">1000000</div>
<div class="item">10000</div>
<div class="item">100</div>
<div class="item">1</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output :
Compact Dropdown
Example 2: This example demonstrates the dropdown compact variation using the compact class. You can see as the user chooses the select box text, the width of the dropdown keeps on changing according to the width of the text.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown Compact Variation</p>
</b>
<hr><br />
<strong>Compact Dropdown:</strong>
<br /><br />
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">Select the width</div>
<div class="menu">
<div class="item">
<p>
CSS (Cascading Style Sheets) is a
stylesheet language used to
design the webpage.
</p>
</div>
<div class="item">
<p>
Web Technology refers to the various
tools and techniques that are utilized
in the process of communication
</p>
</div>
<div class="item">
<p>HTML stands for HyperText Markup Language.</p>
</div>
<div class="item">
<p>
jQuery is an open-source JavaScript library
that simplifies the interactions between an
HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript.
</p>
</div>
<div class="item">
<p>Document Object Model (DOM)</p>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/modules/dropdown.html#compact
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...