Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

I have a requirement to prevent tags from wrapping and instead display them in a single line using the jQuery TagIt plugin.

Check out my preview:
https://i.stack.imgur.com/lYhsi.png

My goal is to have all the tags displayed on a single line without wrapping, with a horizontal scroll bar for vertical scrolling. Additionally, I want the input element at the end of the tags to be on the same line.

Here's a minimal reproducible example:

<!doctype html>
<html lang="en" class="h-100">
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f1fcce7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b1616e4d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0839594842">[email protected]</a>/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9baacaabdbcab">[email protected]</a>/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 s...

javascripthtmljquerycssjquery-select2

Answer №1

Give this a try:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__"" data-cfemail="fb9994948f888f899a8bbbced5cbd5c9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__"" data-cfemail="85e7eaeaf1f6f1f7e4f5c5b0abb5abb7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__"" data-cfemail="2655434a4345521466120816081715">[email protected]</a>/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__"" data-cfemail="483b2d242d2b3c7a652a27272b3b262f213b2d2bec212d252dda0e222d3129">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__"" data-cfemail="0b786e676e687f394b3f253b253a38">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing JQuery in a ReactJS Component

I attempted to import the jquery file into my index.html in order to use the jquery $ symbol within a React component. However, when I tried using $('button').click(function()), I encountered errors stating that $ was undefined. I believe there ...

jqueryreactjscomponents

Exploring Angular's filtering capabilities and the ngModelChange binding

Currently, I am in the process of working on a project for a hotel. Specifically, I have been focusing on developing a reservation screen where users can input information such as the hotel name, region name, check-in and check-out dates, along with the nu ...

htmlangulartypescript

Efficiently Filtering User Input and Other Things

Imagine I have a setup for organizing a television guide like this: <div class="day"> <p>A Date</p> <div class="time"> <p>A Time</p> <div class="show"> <p>A Show</p> ...

javascriptjqueryhtmlcss

Scrolling is endless with jCarousel - just press a button to keep moving even when you reach the first or

I seem to be experiencing a problem with jCarousel where, upon starting at the beginning, pressing the left button fails to scroll the carousel. The expected behavior is for the carousel to cycle to the end item when the left button is pressed while the f ...

javascriptjqueryjcarousel

Creating a sticky section with Tailwind CSS utility classes

I have a page in my Next.js web app, and I want to make the section highlighted in blue (wrapped in <aside> tag) sticky so that it stays in place while scrolling, with only the main section containing the chart scrolling. The code snippet below is f ...

cssnext.jstailwind-css

Load jQuery in PHP script and return it

After searching around, I have not been able to find a suitable example for what I am trying to accomplish. Here is the scenario that I am facing: On a page (constructed in PHP and HTML), there is an included PHP script (currentMonth.php) that runs when th ...

phpjqueryajax

Enabling Multiple Login Feature in Node.js

const handleLogin = async (req, res) => { const User = require("../models/user"); const LoginInfo = require('../models/login_info'); try { const { email, mobile, password, otp } = req.body; const params = []; if(ema ...

javascriptreactjsnode.js

PHP code for displaying images on the same level

Is there a way to position images side by side in PHP? For example: image image image image. Currently, with the following code: print "</h2><br><a href='form.php'><img src=***.jpg width=100 height=100 /><br> ...

htmlcssimage

How to override an event in JavaScript when a specific value is entered

I am looking to implement a system with complex conditions. The goal is to have an alert appear when a value is inputted and the button is clicked. First, a confirmation message Have you input ? should be displayed, followed by clicked with input. If no va ...

javascripthtml

When a user hovers over the image, a button is revealed

I have a test page on my website: If you'd like to check it out, feel free to visit: I am trying to create a feature where when you hover over an image, a black button with text and links will appear. When you move your mouse away from the image, ...

csshovermouseovercenter

Effortlessly inserting and posting data into a database with Laravel, Bootstrap Modal, and Ajax

My issue is that I am unable to retrieve the value of a textarea input in a Bootstrap modal using Input::get(), as it returns null. The submit button and text input in my view: <button type="button" class="btn btn-danger" onclick="customModalSubmitF ...

phpjqueryajaxtwitter-bootstraplaravel

Waiting for Angular's For loop to complete

Recently, I encountered a situation where I needed to format the parameters and submit them to an API using some code. The code involved iterating through performance criteria, performance indicators, and target details to create new objects and push them ...

javascripttypescriptfor-loop

Is it possible to reference the same PHP file in multiple locations?

Currently, I am working on a web development project where I have created a header.html file to store the common header for all my webpages. This header file is located in the parent directory. Within my header.html file, I have included references to bot ...

phphtmlcss

Does the onwheel event get triggered when scrolling on a trackpad?

Despite being a fundamental inquiry, the answer remains elusive to me. Due to its simplistic nature, there isn't much of an elaborate explanation available. Regrettably, I am lacking access to a laptop for testing purposes. ele.onwheel = function(e) ...

javascripteventsmobilemouseeventtrackpad

The body of the POST request appears to be void of any

Whenever I make a request using curl or hurl, an issue arises. Despite req.headers['content-length'] showing the correct length and req.headers['content-type'] being accurate, req.body returns as {}. Below is the Hurl test: POST http:/ ...

javascriptnode.jsexpresspost

Transmitting an item through a GET request using parameters in Postman

Recently joining this site, I created my user account just a few days back. I am attempting to send a GET request using Postman, but it's not working as expected. There seems to be some issue. Here is what I am trying to accomplish: Using Postman: ...

javascriptnode.jsreactjsfirebasepostman

Displaying the data from a database on a browser using node.js, MySQL, and Jade

Currently, I am delving into Node.js, Express.js, and Jade while utilizing a MySQL database. As a newcomer to node.js, I decided to start with something simple: presenting data from the database in a table on the browser. Unfortunately, my attempts have no ...

javascriptmysqlnode.jsexpresspug

How to navigate to the "not now" button in Instagram notifications with Selenium and Python

I'm currently working on a custom "Instagram bot" to log in to Instagram. Although I've managed to bypass the login screen, I'm encountering an issue with a popup message that says: https://i.stack.imgur.com/OMA6h.png from selenium import we ...

pythonhtmlseleniumbotsweb-deployment

What specific portion of the code will be transformed into a virtual DOM?

As a newcomer to the virtual DOM concept, I have been pondering how it functions over the past few days. Let's envision that I have integrated a simple template engine like twig into my project, and I am utilizing vue.js as my chosen javascript frame ...

javascriptdomvue.jsvirtual-dom

Is there a way to access an Excel file with JavaScript without relying on the ActiveX control?

Is there a way to access an Excel document using JavaScript code without relying on an ActiveX control object such as shown below: var myApp = new ActiveXObject("Excel.Application"); myApp.workbooks.open("test.xls"); ...

javajavascriptxcodeexcelactivexobject