0

I have a submit button, with 30px width, to the right of a text input field.

The text input field should dynamically fill up all available space.

What's the styling to accomplish this?

<div class="wrapper">
  <input type="text">
  <input type="submit">
</div>
Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
  • Do you want the size of the text input field to change as text is entered into it, or just take up whatever space is remaining after accounting for the submit field? – Josh Rutherford Oct 13 '15 at 17:15
  • Yes, the second case - "take up whatever space is remaining after accounting for the submit field". – Fellow Stranger Oct 13 '15 at 17:17

4 Answers4

1

The box-sizing is there because the submit button has a border and padding on it by browser default so it's adding to my 30px declaration. You can remove it if you add the padding-left padding-right and border-left and border-right together and minus it from the width. calc() is IE9+, but shouldn't be a problem these days. Very useful for these sorts of things.

* {
  box-sizing: border-box;
}

.wrapper {
  width: 500px
}

input[type="text"] {
  width: calc(100% - 30px)
}

input[type="submit"] {
  width: 30px;
  float: right;
}
Jeff Lau
  • 358
  • 1
  • 9
1

Try this-

*{
  box-sizing:border-box;
}

.wrapper:after{
  clear:both;
  content: "";
}

#submit{
  float:right;
  width:100px;
}

#text{
  float:left;
  width: calc(100% - 100px);
}
<div class="wrapper">
  <input type="text" id="text">
  <input type="submit" id="submit">
</div>
Xahed Kamal
  • 2,203
  • 1
  • 20
  • 41
0

* {
  box-sizing: border-box;
}
.input-wrapper {
  padding-right: 30px;
}
#text {
  width: 100%;
  float: left;
}
#submit {
  width: 30px;
  float: right;
}
<div class="wrapper">
  <div class="input-wrapper">
    <input type="text" id="text">
  </div>
  <input type="submit" id="submit">
</div>
max
  • 8,632
  • 3
  • 21
  • 55
0

You could opt for flexbox if you have the browser support:

.wrapper {
  display: flex;
}

input[type="text"] {
  flex: 1;
}
<div class="wrapper">
  <input type="text">
  <input type="submit">
</div>
Josh Rutherford
  • 2,683
  • 1
  • 16
  • 20