"The CSS problem is that the input tags should be aligned in the same row instead of the second row

If you could take a look at this jsfiddle example

Currently, I am using bootstrap tags for my system. However, when I add more than 6 or 7 input tags, they spill over into a second row. I want them to all fit within the first row, similar to the image shown here. Can someone please assist me with the CSS needed to achieve this? https://i.sstatic.net/pJdR5.png

$(document).ready(function() {
$('.tags').tagsinput({
    allowDuplicates: true
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/app.css" rel="stylesheet"/>

<div class="col-md-6 col-sm-6 col-lg-6">
    <input type="text" value="" class="tags" />
    <div class="items"></div>
</div>

jqueryhtmlcsstwitter-bootstrap

Answer №1

Include the following CSS to achieve the desired result:

.bootstrap-tagsinput {
  white-space: nowrap;
  overflow: scroll;
}

For a live demonstration, check out this sample: http://jsfiddle.net/a0LvLj7x/93/

Answer №2

To achieve this effect, you can utilize the CSS property white-space: nowrap. Refer to the updated code snippet below for implementation:

$(document).ready(function() {
  $('.tags').tagsinput({
    allowDuplicates: true
  });
});
.bootstrap-tagsinput {
  white-space: nowrap;
  width: auto;
  min-width: 100%;
  max-width: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/app.css" rel="stylesheet"/>

<div class="col-md-6 col-sm-6 col-lg-6">
    <input type="text" value="" class="tags" />
    <div class="items"></div>
</div>

Answer №3

Make sure to add the overflow scroll property to the bootstrap-tagsinput class like shown below:

.bootstrap-tagsinput {
  white-space: nowrap;
  width: auto;
  min-width: 100%;
  max-width: none;
  overflow: scroll;
}


$(document).ready(function() {
  $('.tags').tagsinput({
    allowDuplicates: true
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/app.css" rel="stylesheet"/>

<div class="col-md-6 col-sm-6 col-lg-6">
    <input type="text" value="" class="tags" />
    <div class="items"></div>
</div>

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

Converting JSON data into HTML format

I have been tasked with displaying a list of news articles on my webpage, and I have been provided with a link to a json file containing the necessary data. My goal is to convert the information in the json file into HTML format. Here is a preview of the ...

jqueryhtmljson

Maintaining an element's vertical position in relation to the screen with jQuery

I'm very close to achieving what I want, but my goal is a bit unconventional. My setup includes several panels divided into 2 columns, with each panel capable of triggering an expand/compress toggle. My challenge is maintaining the vertical position ...

jquerycss

Is there a way to send an Ajax response to the web browser client as a downloadable file?

In my MVC 3 project, I have generated a csv file in an Action Method on the server named GetCSV() which is designated as an [HttpPost] action method. My goal is to send this csv file directly to the web browser for download. While I was able to achieve t ...

javascriptjqueryasp.netajaxasp.net-mvc-3

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation

Sending an array as JSON data to PHP using the $.ajax post method. The $_POST array is

After spending a considerable amount of time on this, I'm still struggling to figure out what I'm doing wrong. I'm having difficulty retrieving the data in the PHP file. I've made multiple calls to "copy" to populate the "result" arr ...

phpjavascriptjqueryajaxjson

Implement the jQuery colorbox plugin onto a dynamically generated element to display the initial image consistently

Utilizing DataTables.net, I have dynamically created a picture table using ajax. Presently, displaying the pictures through colorbox is functioning flawlessly. $('.colorbox').live('click', function(e) { e.preventDefault(); $(&a ...

jquerygallerycolorbox

The issue of the JQuery method failing to function properly on a button arises when the button is added

Upon loading a HTML page containing both HTML and JavaScript, the code is structured as shown below: <button id="test"> test button </button> <div id="result"></div> The accompanying script looks like this (with jQuery properly in ...

javascriptjqueryhtmlajax

Is it possible to show elements from an ngFor loop just once when dealing with a two-dimensional string array in a display?

I have an array of nested strings, and I am attempting to display the contents of each inner array in a table format. My goal is to have the first table show the values from the first index of each inner array and the second table to display the values fro ...

htmlangular

Why aren't CSS variables "calculating" the color?

Can anyone help me understand why I am having trouble assigning block-level CSS variables using values from SASS? Specifically, the line color: hsl(3, 75%, var(--main-color-l)); is not producing any output. My setup involves a static site generator with ...

csssass

The parent div isn't properly extending to accommodate the table, and the columns aren't aligning correctly within the table when using CSS flexbox

I have a scenario where I need a table inside a div to take up the entire space of the div, with the second column and its inputs expanding as much as possible to fill the width (i.e. col1+col2 = div width). Due to being nested within another div, absolut ...

htmlcsshtml-tableflexbox

Toggle the slide when you hit submit

I'm considering the functionality of my code. I am interested in creating a slide toggle effect on a div or span when hovering over an input submit button. Here is an example: https://i.sstatic.net/pBSK8.png What is the best approach to achieve thi ...

jqueryhtmlcss

Is it possible to resize an image to fit within its parent div using only the parent div

Is there a way to ensure that an image inside a div resizes itself based on the dimensions of the div without distorting the ratio? <div class="w-50"> <img src="" class="w-full h-full image-cover"> </div> ...

htmlcsstailwind-css

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

htmlcss

What is the best method to retrieve child elements from a class list object?

Seems like I have a similar content class <div class="parentclass"> <div class="childClass"> </div> <div class="childClass"> </div> <div class="childClass"> </d ...

javascripthtmlnode.jscss

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

I'm facing a situation where I need to apply ng-style (or ng-class) multiple times depending on a variable. However, this repetitive task of writing ng-class for the same functionality for each widget is quite cumbersome for me. Is there a way to si ...

javascriptcssangularjsangularjs-directive

Having trouble with your Jquery resize or scroll function?

function adjustNavbar() { if ($(window).width() > 639) { $(document).scroll(function () { if ($(window).scrollTop() > 60) { $('.navbar').addClass('background', 250); } else { ...

javascriptjqueryscrollresizescrolltop

Can you please explain to me how to target a specific element by its ID in the DOM and then move on to the next element with the same ID using jQuery

During the event handling process, a scenario arises where two div elements end up having identical IDs within the DOM structure. While using JQuery, my objective is to specifically target the second occurrence of the div with the aforementioned ID in the ...

javascriptjqueryhtmlcssdom

Refreshing a div's content with a single click to update the page

I'm experimenting with elements above my head and striving to absorb new knowledge. In my admin page, I use jQuery to reveal a hidden div that displays another page within it. Here's how I achieve this: $(document).ready(function(){ $("a#fad ...

phpjavascriptjqueryhtmlcss

Choose only the options that are present in both arrays

I am working on creating a multiple select feature that displays all nodes, but only checks the ones that are present in 2 arrays. My front end is developed using Angular 8 and TypeScript. private mountSelect(nodesInRelation, lineApiKey) { console.lo ...

javascripthtmlangulartypescript

Creating a banner image that scrolls while maintaining a fixed size

I'm looking to add a banner image with a scrolling effect as users navigate down the page, but I'm not sure what this technique is called. An example of what I'm trying to achieve can be seen on this site. As the user scrolls down, the res ...

javascriptjqueryhtmlcsstwitter-bootstrap