CSS Stretch Textbox to Fill Remaining Space

CSS make textbox fill all available width

UPDATED ANSWER IN 2018

Just came across this old question and there is now a much simpler and cleaner way to achieve this by using the CSS Flexible Box Layout Model which is now supported by all major browsers.

.flex-container {  display: flex;}
.fill-width {  flex: 1;}

<div class="flex-container"> <label>Name:</label><input class="fill-width" type="text" /><span>more text</span></div>

Stretch the input field to the remaining space using flex in an ordered list

You can get it by using display flex and width property,

ol {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

ol li {
    margin: 15px;
    width: calc(50% - 30px);

}

input {
    width: 100%;
}

b {
    width: 100%;
    display: flex;
}

<ol>
    <li><b>
      <label>NIC.#: </label>
      <input type="text" name="nic">
    </b></li>
    <li><b>
      <label>DOB: </label>
      <input type="DOB" name="bday">
    </b></li>
    <li><b>
      <label>Email: </label>
      <input type="email" name="e-mail">
    </b></li>
    <li><b>Gender 
      <input type="radio" name="gen">
      <label>Male</label>
      <input type="radio" name="gen">
      <label>Female</label>
    </b></li>
</ol>

Style input element to fill remaining width of its container

as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Get a textbox to fill 100% of the width of its container div

You can simply use flex like this :

form {  display: flex;}
input[type="text"] {  flex: 1}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><div id="rowFormContainer">  <form id="frm">    <input type="text" id="txtUserURL" placeholder="Stack Overflow URL" />    <input type="submit" value="Get" class="btn btn-success" />  </form></div>

[CSS Challenge]: Creating a resizable textbox that can stretch vertically and horizontally without warping corner elements

Hm, I got something working by using actual img elements (which have an inherent width and height) for the individual sections, along with flexbox (specifically flex-basis, flex-grow and flex-shrink).

The only problem I can see is that the center element's background's borders are blurry. Not sure how to fix that, but other than that, it works. No border cutoff.

* {
    padding: 0px;
    margin: 0px;

    box-sizing: border-box;
}

.textbox-container {
    width: min-content;
    height: auto;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.textbox-vertical-block {
    width: 100%;
    max-width: 100%;
    height: 80px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.textbox-vertical-block>* {
    width: auto;
    height: 100%;

    object-fit: fill;
}

.textbox-vertical-block>*:nth-child(2) {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 0;
}

.textbox-center-block {
    height: auto;

    align-items: stretch;

    background-image: url(https://i.postimg.cc/d3p7Nt38/Textbox-Center.png);
    background-size: 100% 100%;
    background-repeat: repeat;
}

.textbox-center-block.textbox-vertical-block>* {
    height: initial;
}

.textbox-center-block>.textbox-block {
    width: 6px;
}

.textbox-center-block>textarea {
    width: auto;
    height: auto;

    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;

    margin: 16px;
    padding: 16px;
}

<div class="textbox-container">
    <div class="textbox-vertical-block">
        <img class="textbox-block" src="https://i.postimg.cc/jDn9G5wH/Textbox-Top-Left.png" />
        <img class="textbox-block" src="https://i.postimg.cc/qtfY0Ty9/Textbox-Top-Middle.png" />
        <img class="textbox-block" src="https://i.postimg.cc/8FhYz0bs/Textbox-Top-Right.png" />
    </div>
    <div class="textbox-vertical-block textbox-center-block">
        <img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
        <textarea></textarea>
        <img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
    </div>
    <div class="textbox-vertical-block">
        <img class="textbox-block" src="https://i.postimg.cc/kD70BqzC/Textbox-Bottom-Left.png" />
        <img class="textbox-block" src="https://i.postimg.cc/CdJW89pq/Textbox-Bottom-Middle.png" />
        <img class="textbox-block" src="https://i.postimg.cc/dL1gjnJS/Textbox-Bottom-Right.png" />
    </div>
</div>

Input fill the remaining space

If you are okay with setting the width of the select box to a percentage you can then have the input fill the remaining width. You will also have to float the input and select to the left.

Try modifying the .choose-game select and input properties like this

.choose-game select { width:20%; float:left }

.choose-game input[type="submit"] { 
    background-color: #3498db; color: #fff; cursor:   pointer; width:80%; float:left;
}

Textbox to fill space

JSFiddle
Inputs are inline bydefault and only the
Block level elements can aquire the remaining space left after a floating element. So you should change the display property for input to block i.e. display:block

 #left {     float:left;     width:180px;     background-color:#ff0000; } #right {       display:block;     background-color:#00FF00; }

 <div>     <div id="left">         left     </div>     <input type="textbox" value="right" id="right"/> </div>       

---

Related Topics