Situation: I am currently working on a project that involves creating a dynamic input box where users can add words that are displayed individually in bubbles. To achieve this, I am attempting to have a div container placed side by side with an input field. The goal is for the user to add elements and see them drop seamlessly into the div container next to the input field. If you need clarification on what I'm aiming for, feel free to check out the reference jsfiddle.
My Issue: The problem arises when adding an element to the div container, causing it to exceed the allocated maximum size that I initially set. I believe the root of the issue lies in the width=100% attribute used for the input box, as it references the parent div which remains static despite the addition of new elements. How can I ensure that the input text box dynamically adjusts its size to fill the remaining space without exceeding it?
My goal: My objective is to find a way for the input box to resize dynamically and fit perfectly within the parent container when sibling elements are added alongside it.
Any assistance or guidance on this matter would be highly appreciated.
Code Snippet:
$('.emotionsInput').keypress(function (e) {
var key = e.which;
if (key == 13)
{
var inputWord = $(this).val();
var currentCell = $(this);
createTag(currentCell);
}
})
function createTag(currentCell)
{
var parentCell = currentCell.parent()
var inputWord = currentCell.val();
currentCell.val("");
var newTagHTML = '<span class="emotionTag">' + inputWord + '</span>';
parentCell.children(".emotionTagsDiv").append(newTagHTML);
}#testTagBox > span > span {
border-color:transparent;
box-shadow:0 0 0 2px #000;
border-radius: 40px;
padding:5px;
background-color: white;
width: 100%;
display:flex;
}
#testTagBox > span {
padding: 0.67rem 0.5rem;
width: 100%;
display:flex;
}
#testTagBox {
width: 30rem;
padding-right:1.8rem;
}
.emotionsDiv {
display: flex;
width: 100%;
white-space: nowrap;
}
.emotionTagsDiv {
flex: 1 1 auto;
white-space: nowrap;
}
.emotionTag {
display: inline-block;
padding-right: 1em;
}
input {
font-family: Arial;
display: flex;
flex: 20 1 auto;
width: 100%;
}
input:focus {
outline: none;
}<html lang="en">
<body>
<div id="testTagBox">
<span>
<span>
<div class="emotionsDiv">
<div class="emotionTagsDiv">
</div>
<input class="emotionsInput" placeholder="type and press enter here" type="text" value="">
</div>
</span>
</span>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script src="testapp.js" type="text/javascript" ></script>
</body>
</html>As depicted in the code snippet, the entire container undergoes resizing when adding an element instead of just the input box adjusting its size to maintain the original dimensions of the parent container while accommodating all elements seamlessly.