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

Securing PHP Code with HTML Encoding

I'm having trouble parsing an HTML page due to encoding issues. Despite trying popular solutions like using utf8_encode() and utf8_decode(), my results remain unchanged. Below is a snippet of my code along with the output. Code $str_html = $this-> ...

phphtmlcharacter-encoding

A guide to showing the value of a selected checkbox in Vue.js

Here is a link to the reference: https://jsfiddle.net/8xom729c/ <div class="checkbox-alignment-form-filter"> <input type="checkbox" id="HR 3502 : 2004" class="vh-product" value="HR 3502 : 2004" v-model="checkboxestwo[0]" v-on:click="checkAllt ...

javascriptvue.js

Is it feasible to unload modules in Node.js once they have been loaded?

app.post('/userlogin',function(req,res){ var Module1=require('./lib/module1'); app.use(Module1); var Module2=require('./lib/module2'); app.use(Module2); }); Is it possible to unload or destroy the modules after they ...

jquerynode.jsnpm

Compose an email without the need to access the website

Is there a way to send email reminders to users without having to load the website pages? In the reminder section, users can select a date for their reminder and an email will be automatically sent to them on that date without requiring them to access the ...

javascriptphpemail

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

htmlcssruby-on-rails

What is the best method for testing different versions of the same module simultaneously?

My goal is to distribute a module across various component manager systems like npmjs and bower. I also want to provide downloadable builds in different styles such as AMD for requirejs, commonJS, and a global namespace version for browsers - all minified. ...

javascriptunit-testingbuildnpmgulp

Converting HTML and CSS to PDF in Java using iText

I've been working on converting HTML to PDF. Initially, I transformed my HTML code into XHTML using the resources provided in this link: After successfully displaying the generated XHTML code in a browser by creating an HTML file for testing purposes ...

javahtmlcsspdfitext

aligning two elements within a container to have equal heights

I need to position 2 divs inside a container div. Their height should always be the same, regardless of content. To achieve this, I am using absolute positioning with top and bottom set to 0. Currently, the container div #three collapses and hides the cont ...

htmlcsspositionabsolute

The switch statement within Angular returns null when using getElementById()

In my single page application, I am using ng-switch to switch between different 'pages'. One of these pages contains a modal that is opened using the following function: var modal = document.getElementById('myModal'); vm.openModal = fu ...

javascriptangularjstwitter-bootstrap

Struggling with aligning mat-icon in the center using HTML and CSS?

My issue is that the mat-icon in my generated columns is not center aligned. What could be causing this? When using ngFor to generate my datatable columns dynamically, none of them align correctly. The mat-icon inside my DIV defaults to left alignment. ...

htmlcssangularngx-bootstrapngx-datatable

Tips for extracting the chosen value from a dropdown list within a table cell using JavaScript

Here is an example of an HTML element: <td> <select> <option value="Polygon 47">Polygon 47</option> <option value="Polygon 49">Polygon 49</option> </select> </td> I am looking for a ...

javascripthtml

Preventing Users from Inserting White Spaces in Input Fields Using the jQuery Validate Plugin

Is there a way to prevent users from inserting white-spaces in my input field? (I am using the jquery.validate.js plugin) For example: User cannot input white-spaces: John Pitt My User can input without white-spaces:JohnPittMy Edit: Using regex in ...

jqueryjquery-validate

Click to be redirected to the same page on a different store

I have been working on a Shopify project where I implemented a pop-up that appears when the page loads, prompting users to choose between the US and UK websites. Once a user clicks on one of the options, the pop-up either closes (UK) or redirects them to ...

javascript

Determining outcomes of forms added in real-time

Need assistance with dynamically creating tickets, calculating prices, and displaying results when additional tickets are added. Currently facing an issue where price data is not being calculated when a new ticket is added. Any help would be greatly apprec ...

javascriptjqueryhtml

Tips for ensuring a successful POST request using a hyperlink tag

Within my view file, I have the following code snippet: <a href="/logout" role="button" class="btn btn-lg btn-primary left-button">Logout</a> Inside my app.js file, I have implemented the following route for loggi ...

javascriptnode.jsexpresspassport.js

Displaying the blog post title in the metadata information

Currently, I am facing a challenge with my Jekyll site's Search Engine Optimization because I am having difficulty setting meta information. ... <meta name="og:title" content="{{ seo_title }}" /> ... <!-- now in my for post-loop: --> {% f ...

htmlseojekyll

Exploring the Wonders of React Memo

I recently started delving into the world of React. One interesting observation I've made is that when interacting with componentized buttons, clicking on one button triggers a re-render of all button components, as well as the parent component. impo ...

javascriptreactjsnext.js

Comparison of button text alignment: stacking vs inline placement

I currently have a button on my webpage labeled "Learn More." Unfortunately, the text on the button is not lining up as it should. Instead of flowing in a line, the text seems to be stacking on top of each other. The HTML code for the button is included ...

htmlcsstwitter-bootstrap

Exploring the jSignature feature in jQuery and Laravel models

I'm looking to retrieve the model (Offer) signature using jQuery. When I alert only the model, everything works fine. alert( JSON.stringify(<?php echo $offer; ?>) ); However, when trying to access just the $offer->signature like this alert( ...

jquerylaravel

How can you use AJAX and jQuery to animate one container and fade in another when $_GET['var'] is set and new content is loaded?

There is a <table id="pickups"> located in the file /pages/home.php. By default, the file index.php includes home.php if no other page is specified. When you click on an element (logfile) in a specific column of the table, the container with the clas ...

jqueryajaxfunctiongethyperlink