I want to avoid tags wrapping and display the tags in one line using jQuery TagIt plugin.
I created a TagIt input element using steps in this repository.
Here is my preview:
But I want it to display all the tags in a single line without wrapping and maybe use a scroll bar instead.
Minimal reproduceable example:
<!doctype html>
<html lang="en" class="h-100">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/aehlke/[email protected]/js/tag-it.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jquery-ui-bootstrap/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
<link href="https://cdn.jsdelivr.net/gh/aehlke/tag-it/css/jquery.tagit.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function() {
$("#mintTags").tagit();
});
</script>
</head>
<body>
<input type="hidden" name="mint-numbers" id="mintTags">
</body>
You could add a display flex to the tagit
ulelement.Here is an example of css that will make the list scrollable, depending on the new input class (
tagit-nowrap).