0
207
VistasMostrar etiquetas cortas en una línea
La siguiente imagen es una imagen de la funcionalidad del sitio. En la columna "Ingrese un código", el usuario puede ingresar datos usando TagsInput. Me gustaría mejorar ligeramente la funcionalidad para que las etiquetas cortas se muestren en una línea. Sé que puede aplicar "en línea", pero luego las etiquetas largas van más allá de los bordes de la ventana modal.
.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; }Ya probé muchas opciones y miré muchas respuestas en stackoverflow, pero no logré el resultado. Quizás puedas darme una pista.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Sería bueno si agrega un poco más de código que esto. ¿Supongo que tu clase de tag está en los niños? Lo que necesita es poner el contenedor principal en flex.
<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; /* Exemple 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; } 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta