Is there a way to automatically adjust the size of an input field after dynamic spans have been

Question

Is there a way to automatically adjust the size of an input field after dynamic spans have been

I am looking to replicate the tagging functionality found on StackOverflow when posting a new question.

In this case, spans are dynamically added using an input field located next to them.

Here is an example:

<div>
    <div id="multiple-span">
       <span>Item 1<span>
       <span>Item 2<span>
       ...
       <span>Item n<span>
    </div>
    <div id="input-auto-fit">
       <input type="text">
    </div>
</div>

Is there a way to achieve this using just CSS?

I have attempted using display:table-cell for both the inner divs, but the input field is not properly auto-fitting within the outer div.

javascript html css

Answer 1

Answer №1

To achieve the desired layout, I recommend using a combination of table and table-cell properties with some minor adjustments. Here's how you can do it:

#container {
    display: table;
    width: 100%;
    white-space: nowrap;
}
#left-column, #right-column {
    display: table-cell;
}
#left-column span {
    background: gold;
    padding: 4px;
}
#right-column {
    width: 100%;
    padding-left: 4px;
}
#right-column input {
    width: 100%;
    box-sizing: border-box;
}

<div id="container">
    <div id="left-column">
        <span>Item 1</span>
        <span>Item 2</span>
        <span>Item n</span>
    </div>
    <div id="right-column">
        <input type="text"/>
    </div>
</div>

Answer 2

To achieve the desired layout, I recommend using a combination of table and table-cell properties with some minor adjustments. Here's how you can do it:

#container {
    display: table;
    width: 100%;
    white-space: nowrap;
}
#left-column, #right-column {
    display: table-cell;
}
#left-column span {
    background: gold;
    padding: 4px;
}
#right-column {
    width: 100%;
    padding-left: 4px;
}
#right-column input {
    width: 100%;
    box-sizing: border-box;
}

<div id="container">
    <div id="left-column">
        <span>Item 1</span>
        <span>Item 2</span>
        <span>Item n</span>
    </div>
    <div id="right-column">
        <input type="text"/>
    </div>
</div>

Is there a way to automatically adjust the size of an input field after dynamic spans have been

Answer №1

Similar questions

Error: The 'length' property cannot be searched for using the 'in' operator

Sending information from one Angular 2 component to another

Can this JSON object be created? If so, what is the process to do so?

Evaluation of Library (VueJS) - Displaying various components in an individual test case

Limit the display of an element to a single occurrence by utilizing jQuery cookies

Styling a layout with two columns, centered with an offset

Sometimes the Navbar options fail to show up consistently on the Navbar bar

Retrieving Checkbox Values in PHP: A Step-by-Step Guide

Issue with Ajax sending data to PHP to delete specific SQL row is hindering success

Sliding a div out from the right using jQuery

Implementing CSRF token for the current window's location

Using PHP, eliminate all hyperlinks from the DOM HTML

Removing a key from an index signature in Typescript - a step-by-step guide

Applying jQuery to deactivate blank categories within a sorted directory

I am receiving a success message from webpack indicating that the compilation was successful, but I am encountering a blank page in the

Navigating with hashtags in Angular2 and anchors does not change the page position

Converting a JavaScript object into HTML output

Is there a method for redirecting my page to a specific href link without triggering a page reload?

Forcing Reload of HTML5 Video to Avoid Caching Issues

Incorporate a smooth transition effect to a dynamically resizing div button