How do make a variable-width input field

Question

I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available

http://jsfiddle.net/chovy/WcQ6J/

<div class="clearfix">
    <aside>foo</aside>
    <span><input type="text" value="Enter text" /></span>
</div>

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

div {
    border: 1px solid red;
}

aside {
    display: block;
    width: 100px;
    background: #eee;
    float: left;
}

span {
    display: block;
    width: 100%;
    background: #ccc;
}

input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #000;
}

It works fine with a span, but when I add input it wraps to next line.

You could use display: table-*: jsfiddle.net/userdude/WcQ6J/4 — Jared Farrish
– Jared Farrish, Commented Aug 6, 2013 at 1:03

sheriffderek · Accepted Answer · 2013-08-06 01:51:05Z

2

Here is some whacky solution. I honestly don't really understand why this works. I had it in an old codepen. Good luck!

http://jsfiddle.net/sheriffderek/DD73r/

HTML

<div class="container">

  <div class="label-w">
    <label for="your-input">your label</label>
  </div>

  <div class="input-w">
    <input name="your-input" placeholder="your stuff" />
  </div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  float: left;
  height: 2em;
}

.label-w {
  width: 8em;
  height: 100%;
  float: left;
  border: 1px solid red;
  line-height: 2em;
}

.input-w {
  float: none; /* key */
  width: auto; /* key */
  height: 100%;
  overflow: hidden; /* key */
  border: 1px solid orange;
}

.input-w input {
  width: 100%;
  height: 100%;
}

answered Aug 6, 2013 at 1:51

sheriffderek

9,0736 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nouveau Over a year ago

How about a text indent and an absolute positioned label about the size of that indent?

chovy Over a year ago

The key here was adding overflow: hidden to the input wrapper. Not sure what side effects that creates, but works for now.

sheriffderek Over a year ago

You should try throwing a micro clear fix on that and see if it acts the same.

Teekin Over a year ago

The overflow:hidden trick creates the side-effect that you lose control over the input field's borders. The right-most border will never be shown, for example. Try adding margins to the input field and you'll see what happens.

Scott · Accepted Answer · 2013-08-06 01:00:06Z

2

You could use the CSS calc property to determine the width minus the borders and aside width:

input {
  width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
  box-sizing: border-box;
  border: 1px solid #000;
}

FIDDLE

answered Aug 6, 2013 at 1:00

Scott

21.9k8 gold badges45 silver badges57 bronze badges

Comments

Jared Farrish · Accepted Answer · 2013-08-06 01:07:42Z

2

You could use display: table-*:

div {
    display: table;
    width: 100%;
    background-color: #ccc;
}
aside {
    display: table-cell;
    width: 100px;
    background: #eee;
}
span {
    display: table-cell;
    background: #bbb;
}
input {
    display: block;
    width: 100%;
    background-color: #ddd;
}

http://jsfiddle.net/userdude/WcQ6J/5/

This is a little bit more compatible (and flexible) that display: inline-block, which is not supported in IE8.

answered Aug 6, 2013 at 1:07

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Comments

ShadowCat7 · Accepted Answer · 2013-08-06 00:58:08Z

0

You can set the width of the "aside" to pixels and the span to a percent, but, as you've seen, that will cause problems. It's easier to set both to a percent. Also, "inline-block" will put your elements in line. You can use this or "float: right;", but I prefer setting the display.

aside {
    display: inline-block;
    width: 9%;
}

span {
    display: inline-block;
    width: 90%;
}

See jsfiddle.

answered Aug 6, 2013 at 0:58

ShadowCat7

8248 silver badges16 bronze badges

Comments

Roland Kwee · Accepted Answer · 2020-04-23 17:07:50Z

0

In case you want a truly variable width input field, so that you can manually adjust its width to fill the entire page, or to any other convenient width, why not make that input element fill 100 % of a resizable div?

CSS:

<style>
   div.resize {
      width: 300px; /*initial width*/
      resize: horizontal;
      overflow: auto;
   }

HTML:

<div class="resize">
   <input style="width: 100%" />

The little triangle to drag to resize the div will appear in the lower-right corner of the input element!

answered Apr 23, 2020 at 17:07

Roland Kwee

5,3027 gold badges59 silver badges91 bronze badges

Collectives™ on Stack Overflow

How do make a variable-width input field

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related