CODEWITHSUNDEEP
htmlcss
tbodt
tbodt

Reputation: 17007

Expanding a text box to fill the space available for it

I've got approximately this layout code:

<form class="form">
  <input type="text" placeholder="Enter something!" class="form-control" />
  <input type="submit" class="btn btn-md btn-default" />
</div>

.form {
  max-width: 500px;
  margin: 0 auto;
}

.form input[type="text"] {
  display: inline;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form input[type="submit"] {
  display: inline;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: -4px;
  margin-left: -5px;
}


body {
  padding: 20px;
}

.form {
  max-width: 500px;
  margin: 0 auto;
}

.form input[type="text"] {
  display: inline;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form input[type="submit"] {
  display: inline;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: -4px;
  margin-left: -5px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<form class="form">
  <input type="text" placeholder="Enter something!" class="form-control" />
  <input type="submit" class="btn btn-md btn-default" />
</div>

I would like the button to be on the same line as the text box. But the default width of the text box is 100%, and that pushes the button to the next line. How can I get the text box to expand to be as big as possible without doing that?

Upvotes: 0

Views: 168

Answers (3)

Shou
Shou

Reputation: 2009

Check out flexbox, you can specify the width of the button and let the text input grow and fill the space. The downside is it's a CSS3 feature and therefore not supported in older browsers.

Upvotes: 1

Rasel
Rasel

Reputation: 5734

You can use max-width for text input

max-width: 430px; and button width width: 70px; to adjust with container form You can also use percentage width;

jsfiddle link

Upvotes: 0

symlink
symlink

Reputation: 12218

There's no easy way to do this. Best is to give the text box and the button percentage widths. First get rid of the negative margin on the submit button. Then add these styles:

.form input[type="text"] {
    width:80%;
}

.form input[type="submit"] {
    width:17%;
}

The reason for the missing 3% is that buttons in particular in forms have a lot of extra style rules applied that add things like border and padding, and they differ depending on your browser.

jsFiddle

Upvotes: 0

Related Questions