Show brief tags all on one line

This image showcases the functionality of the site, specifically in the "Enter a code" column where users can input data using TagsInput. I am seeking to enhance this feature by ensuring that shorter tags are displayed on a single line. While I am aware that applying "inline" could achieve this, it may cause longer tags to exceed the boundaries of the modal window.

.tag {
    display: flexbox;
    align-items: center;
    margin: 5px 0;
    margin-right: 5px;
    padding: 0 5px;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
    white-space: nowrap;
    position: relative;
}

Despite my efforts and research on stackoverflow, I have not been able to achieve the desired result. Any suggestions or hints from your end would be greatly appreciated.

javascriptcssreactjsbootstrap-tags-input

Answer №1

If you enhance your code a bit more, it would be even better. I assume your tag class is applied to the children elements? The solution lies in making the parent container a flexbox.

<body>
  <div class="tag-container">
    <div class="tag">100<div class="del">x</div></div>
    <div class="tag">200<div class="del">x</div></div>
    <div class="tag">300<div class="del">x</div></div>
    <div class="tag">400<div class="del">x</div></div>
    <div class="tag">500<div class="del">x</div></div>
    <div class="tag">600<div class="del">x</div></div>
    <div class="tag">700<div class="del">x</div></div>
    <div class="tag">800<div class="del">x</div></div>
    <div class="tag">800<div class="del">x</div></div>
    <div class="tag">1000<div class="del">x</div></div>
    <input
      class="input"
      placeholder="Enter a code"
    />
  </div>
</body>

.tag-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 200px; /* Example width */
  border: 1px solid black;
}
.tag {
  text-align: center;
  margin: 5px 0;
  margin-right: 5px;
  padding: 0 5px;
  border: 1px solid black;
  border-radius: 5px;
  color: black;
}
.del {
  border: none;
  border-radius: 30%;
  background-color: transparent;
  cursor: pointer;
  color: black;
  margin-top: -2px;
}
.input {
  width: 100%;
  min-width: 50%;
  border: none;
  margin: 5px;
  border-bottom: 1px solid black;
}

https://i.stack.imgur.com/OqOBF.png

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

What is the best way to link a file to index.html using feathers.js?

I am currently learning feathers and encountering a problem. I am attempting to include files similar to PHP's switch function. For instance: /src/middleware/index.js 'use strict'; const handler = require('feathers-errors/handler&ap ...

javascripthtmlnode.jsfsfeathersjs

Establish a cookie using the PHP session's username

I have successfully implemented a general cookie for a one-time use scenario. However, I now need to create a cookie based on the username so that a message is displayed only once per user. My approach involves setting up a PHP session for the username ass ...

javascriptphpjquerycookies

Execute function periodically using Vue.js

I have a requirement to update data periodically by calling a function in my Vue.js application. I am looking to call the 'listar()' method every 30 seconds and store the response in a property of vue js. If anyone can guide me on where to locat ...

javascriptvue.jsvue-componentvuetify.js

Utilizing Django to access a JavaScript variable within server-side template code

I am faced with a challenge on a page that dynamically adds textboxes. In order to access the relevant context variable within these dynamically added text boxes, I need to utilize the 'i' variable in both my javascript and template code. Specifi ...

javascriptpythondjango

Using AngularJS, you can pass serialized objects as query string parameters

I'm trying to pass nested objects as query parameters from my AngularJS Controller using the following code: $scope.redirect = function () { const params = $httpParamSerializer({ initval: { user: { id: 1, ...

javascriptangularjsangularjs-1.6

Strange behavior of dropdown submenu

I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfe ...

htmlcss

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

cssangularjs

Look for and choose various fields from a lengthy JSON object

I am working with a JSON object that contains a large list of offerValue objects. { "Code": 0, "response": "SUCCESS", "offerValue": [ { "id": "111", "name": "ABC", "flag": "V" }, { ...

javascriptjson

Is it possible to categorize a JSON object based on its properties and then count the occurrences of each property within

I have an array of objects containing booking information and I need to calculate the count of each booking item in every object. const arr = [ { "ID" : 1, "Name":"ABC", "Bookings":[ { & ...

javascriptangularangularjs

"Encountered a 'net::ERR_HTTP2_PROTOCOL_ERROR' while trying to load a resource for a React app following an upgrade to Visual Studio 2019 version 16.10.0

Since upgrading to VS 16.10.0 (and then 16.10.1) Community Edition, a React website is no longer functioning within Visual Studio/IIS Express. Interestingly, the exact same code runs perfectly when deployed to an Azure app service. Upon loading the home p ...

reactjsvisual-studio.net-core

Eliminate repeated entries in a drop-down menu and display them with commas in between

I am working with a list that contains various language combinations: German to English German to Spanish German to Chinese German to French English to Spanish English to French English to Greek English to Portuguese Does anyone have suggestions on how ...

javascriptjqueryhtmllist

optimal method for displaying HTML strings with components in Vue

My website is a Blog/News site featuring posts that contain HTML content stored in the database. In addition to posts, I also want to include elements like sliders which cannot be generated using v-html. I explored Vue's Render Functions to find a so ...

javascripthtmlvue.jsvuejs2

Update the gulp watch function to use gulp@4

We are currently in the process of transitioning from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9c8e978bbbc8d5c2d5ca">[email protected]</a> to gulp@4, and encountering difficulties during the switch. Upon r ...

javascriptcssnpmgulp

Avoid navigating through hidden tab indexes

Below is the HTML code that I am working with: <span tabindex="19"> </span> <span tabindex="20"> </span> <span tabindex="21"> </span> <span id="hidden" tabindex="22"> </span> <span tabindex="23"&g ...

javascriptjqueryhtml

What is the best way to handle storing various data in the useState hook from an API response

Currently, I am making a call to one API using another API. The first API contains a list structured like this: { "body": [ { "label": "label one", "inputVal": "input value o ...

javascriptreactjs

Why Are My JavaScript GET Request Parameters Displaying as Strings Rather Than Numbers?

Currently, I am in the process of developing a REST API where one of the defined routes looks like this: router.get("/objects/:id?/:val1?/:val2?", getObject); Specifically, my request from Postman appears as follows: http://localhost:8000/objects?val1= ...

javascriptnode.jsrestful-urlget-request

Simultaneous CSS3 animations on a pair of items

I am facing a styling challenge with a wrapper div that is positioned absolutely on the side of the page. Inside this wrapper, there is an unordered list of items. Here is the HTML structure: <div id="wrapper"> <ul class="menu"> ...

htmlcss

What are the issues with the latest API routing in Next.js?

I am encountering an error that says: SyntaxError: Unexpected token s in JSON at position 0 Here is my code: import { PrismaClient } from '@prisma/client'; import { IDPay } from 'idpay'; import { NextResponse } from 'next/server&ap ...

javascriptreactjswebnext.jsapp-router

Updating the `App` component is not permissible during the rendering of the `UserTable` component

Currently, I am diving into React Hooks in functional components and I came across the React Hooks tutorial. However, as I followed along, I encountered an error stating: "Cannot update a component (App) while rendering a different component (UserTable). T ...

reactjsreact-hooks

Tips for incorporating local storage into Angular applications

After successfully creating a table using Angular, I decided to incorporate a local storage feature. Despite my efforts, I'm struggling with implementing gsklee/ngStorage and gregory/angular-local-storage libraries into my existing code. Could someon ...

javascriptangularjs