How can i make my input inline with my chips? - css

Question

I wanted to create custom tags input component.
So my code looks like this
import React from 'react';
import './App.scss';
const App = () => {
return (
<div>
<div className="tags-input">
<ul id="tags">
<li className="tag">
<span className="tag-title">tag 1</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">tag 2 sdsdsdsd</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
</ul>
<input type="text" />
</div>
</div>
);
}
export default App;
.tags-input {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
min-height: 48px;
width: 480px;
padding: 0 8px;
border-bottom: 1px solid grey;
border-radius: 6px;
&:focus-within {
border-bottom: 1px solid #0052cc !important;
}
input {
flex: 1;
border: none;
height: 46px;
font-size: 14px;
padding: 4px 0 0 0;
&:focus {
outline: transparent;
}
}
}
#tags {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 8px 0 0 0;
// border:2px solid red !important;
}
.tag {
width: auto;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 0 8px;
font-size: 14px;
list-style: none;
border-radius: 6px;
margin: 0 8px 8px 0;
background: #0052cc;
.tag-title {
margin-top: 3px;
}
.tag-close-icon {
display: block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 14px;
margin-left: 8px;
color: #0052cc;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
}
so far every thing is good.
When i have for exampel two chips and i click on the input to type - input appears next to the last chip.
My problem happens when have multiply chips
for example four of them
const App = () => {
return (
<div>
<div className="tags-input">
<ul id="tags">
<li className="tag">
<span className="tag-title">tag 1</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">tag 2 sdsdsdsd</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">tag 2 sdsdsdsd</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">i should be able to type right from here</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
</ul>
<input type="text" />
</div>
</div>
);
}
export default App;
in this case when i type in the input, it is under - i can't type next to the last element chip which is i should be able to type right from here
I can only under the last element i should be able to type right from here.
Here is my stackblitz example
https://stackblitz.com/edit/react-ax4zun?file=src%2FApp.js
So i need to type here
https://ibb.co/DbXb752
but my cursor goes actually down
https://ibb.co/SfL09jR

Answer 1

The best approach here would be to move the tags outside of the UL as individual spans, at the moment because they are inside the UL the input will always be pushed onto a new line when there is not enough space.

Answer 2

You should move up your input element and put it into <li> tag