Search code examples
javascripthtmljquerycssjquery-select2

How do I avoid tags wrapping and display the tags in one line using jQuery select2 plugin?

I want to avoid tags wrapping and display the tags in one line using jQuery TagIt plugin.

Here is my preview:
enter image description here

But I want it to display all the tags in a single line without wrapping instead of scrolling vertically and maybe use a horizontal scroll bar instead. Also the input element at the end of the tags should be on the same line.

Minimal reproduceable example:

<!doctype html>
<html lang="en" class="h-100">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $("#token-ids").select2({
            theme: "bootstrap-5",
            placeholder: "Enter Values Here",
            tags: true,
            tokenSeparators: [',', ' '],
        });
    });
</script>
</head>
<body>
<select class="form-control" id="token-ids" name="token-ids[]" multiple="multiple"></select>
</body>
</html>

Solution

  • Try this:

    ul.select2-selection__rendered {
  flex-wrap: nowrap !important;
  overflow-x: scroll !important;
}
    <!doctype html>
<html lang="en" class="h-100">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $("#token-ids").select2({
            theme: "bootstrap-5",
            placeholder: "Enter Values Here",
            tags: true,
            tokenSeparators: [',', ' '],
        });
    });
</script>
</head>
<body>
<select class="form-control" id="token-ids" name="token-ids[]" multiple="multiple"></select>
</body>
</html>