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

Is there a way to use jQuery to adjust the text color once it has been clicked on?

I have been struggling to change the text color upon clicking on it without any success. Within my code, there are seven labels - one for the question, four for the answer options, one for the correct answer, and the last one for the explanation. The desi ...

javascriptjqueryasp.net

How can a block be made to stay fixed and float in a flexbox layout?

There are three blocks within the body of this page. Title bar Content block Bottom block I have employed a flex display for the body layout. My goal is to make the title bar float, meaning it should always remain at the top when scrolling. I attempted ...

htmlcsslayoutflexbox

Struggling with applying mixins

Is it possible to select only the top border using this mixin? Currently, I only need a top border but would like to have the option to use others in the future. Using separate mixins for each side of the border seems inefficient. .bordered(@top-width: 1 ...

csslessmixins

Error message in my Angular project: Invalid Target Error

Out of nowhere, I encountered an invalid target error while running my Angular project with the command: npm start An unhandled exception occurred: Invalid target: {"project":"agmbs","target":"build","configur ...

javascriptangularnpm

Tips for creating AngularJS nested transcludes

I'm currently delving into the world of angular directives/transclusion to manage the creation of custom panels within my application. Unfortunately, I seem to have hit a roadblock as the transcluded content is not displaying in the HTML. Below is th ...

javascriptangularjs

Ways to eliminate the Horizontal scroll bar

Currently, I am in the process of transforming a Static Page into a Responsive Page. However, when I resize my page to a lower width, I notice that a horizontal scroll-bar appears along with some margins at the bottom and right side of the last div/Footer. ...

htmlcssresponsiveness

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

jqueryhtmlcssajax

The icon for the weather on openweathermap is currently not displaying

Take a look at what my webpage looks like: http://prntscr.com/dg6dmm and also check out my codepen link: http://codepen.io/johnthorlby/pen/dOmaEr I am trying to extract the weather icon from the api call and display that icon (e.g. "02n") on the page base ...

javascriptjqueryhtmlcss

The getStaticProps function returns a null value, whereas the identical code functions properly in a create-react-app environment

I recently switched my create-react-app to a next.js app in order to implement SSG. I successfully tested the getStaticProps function using a jsonplaceholder API and was able to retrieve data and display it. However, when I changed the API, it started retu ...

reactjsnext.jsstatic

AngularJS - the element of surprise in execution sequence

Encountering a puzzling issue that exclusively affects Internet Explorer (any version) and not Chrome. An "items" array is stored within the "doc" object. Users have the capability to edit items, which essentially deletes the item but retains its content ...

javascriptangularjs

I never receive back the funds I deposit into Formic

I am facing an issue with Formic where the value I store does not return to me as expected. The problem arises when the filter finds a specific value and logs it in line 57, then places the same value in Formic on line 58. However, when I log the Formic ...

reactjsformik

Unraveling JSON data within an AngularJS controller

I'm facing an issue with exposing a field in my AngularJS controller. The problem arises when a JSON 'owner' object is returned by a webservice, containing a field named 'Cave'. If this 'Cave' field has a null, empty, or ...

javascriptjsonangularjs

Animated scrolling in Angular

I am working on a webpage using Angular, where each module is a component with an animation. However, I am facing an issue where the animation only runs when the page loads, but I want it to happen while the component is visible on the screen. One approa ...

cssangularanimationcss-animations

Refresh the dropdown menu selection to the default option

My HTML dropdown menu includes a default option along with dynamically generated options using ng-options. The variable dropdown is bound to the dynamic options, not the default one. <td> <select ng-model="dropdown" ng-options="item as item.n ...

javascripthtmlangularjshtml-select

Angular 2 fails to redirect to a 404 page if both the route parameter and address are not valid

Currently, while working on my application with Angular 4.1.1, I have a habit of declaring routing in every module I create. For instance, in the file new-cars.routing.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, ...

javascriptc#angulartypescriptasp.net-core

Utilizing NodeJS code and the SlackAPI to build a custom chatbot named PFBot

Recently, I came up with an idea for a Slack Bot that could censor inappropriate language used by users. For example, if a user types a curse word, the bot would automatically replace it with symbols based on the length of the word. Although I'm rela ...

javascriptnode.jsslack-api

Is there a way for me to view the contents within the box?

Hey there! I have a question about how to access the content inside this mysterious box "" within the style sheet. For instance, I am curious to find out the link of the image: .facebookicon::before { content: ""; } ...

csscss-content

Execute a simulated click on the Material-UI Tabbar using a programmatic approach or keyboard shortcut

In my electron/react application, I am implementing Material UI tabs in the following manner: <Tabs> <Tab label="View1" > <View1 /> </Tab> <Tab label="View2"> ...

javascriptreactjsreact-reduxmaterial-ui

Issue with MiniCssExtractPlugin during compilation of the entry point build

We have integrated webpack into our deployment process to bundle resources efficiently. However, we are now facing a challenge as we aim to include the bundling of sass files through webpack in order to streamline our build process. The MiniCssExtractPlugi ...

javascriptwebpackmini-css-extract-plugin

Testing API route handlers function in Next.js with Jest

Here is a health check function that I am working with: export default function handler(req, res) { res.status(200).json({ message: "Hello from Next.js!" }); } Alongside this function, there is a test in place: import handler from "./heal ...

javascriptunit-testingjestjsnext.js