CODEWITHSUNDEEP
htmlcss
uncaged
uncaged

Reputation: 797

Expanding an input to fill a form

I'm just trying to have a label and text box fill the width of a form. I can't believe how much time I've wasted on this simple problem. This would have been SO simple with tables.

Here's the simple HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
	<style>
		* { box-sizing: border-box; }
	</style>
</head>
<body>
	<form style="width: 500px; border-style:solid; border-color: red;">
		<label for="Txt">Label:</label>
		<input id="Txt" type="text" style="width: auto;" />
	</form>
</body>
</html>

And here's how it looks:

enter image description here

All I want is for my text box to fill the rest of the form (the empty area to the right of the text box. I've tried 100%, display:table etc. I want to solve it with HTML and CSS only (no JavaScript or jQuery), and without having to play around with pixel counts or percentages until it looks right.

Thanks in advance.

Upvotes: 0

Views: 82

Answers (5)

Gautam Naik
Gautam Naik

Reputation: 9358

Here is my solution

Use width: calc(100% - 82px); for the input width

The 82px is equal to width of the label and (1px border * 2) of the input

* {
  box-sizing: border-box;
}

label {
  width: 80px;
  display: inline-block;
}

input {
  display: inline-block;
  width: calc(100% - 82px);
  border: 1px solid #ccc;
  font-size: 16px;
}
<form class="back">
  <label>Test Label</label><input type="text" name="search" class="">
</form>

Upvotes: 2

Francisco A. Cerda
Francisco A. Cerda

Reputation: 124

Using browser-safe CSS rules, you can set width for label and input, then set them to display: inline-block, this way.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <style>
        label {
            display: inline-block;
            width: 10%;
        }

        input {
            display: inline-block;
            width: 88%;
        }

    </style>
</head>

<body>
    <form style="width: 500px; border-style:solid; border-color: red;">
        <label for="Txt">Label:</label>
        <input id="Txt" type="text" />
    </form>
</body>

</html>

Upvotes: 0

sol
sol

Reputation: 22949

Flexbox approach:

form {
  display: flex;
}

input {
  flex: 1;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <style>
    * {
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <form style="width: 500px; border-style:solid; border-color: red;">
    <label for="Txt">Label:</label>
    <input id="Txt" type="text" style="width: auto;" />
  </form>
</body>

</html>

Upvotes: 1

acesmndr
acesmndr

Reputation: 8505

You could use the grid layout by defining the grid template.

Here is the link to Mozilla Docs for CSS Grid.

* { box-sizing: border-box; }
.form {
  width: 500px;
  border-style:solid;
  border-color: red;
  display: grid;
  grid-template-columns: min-content auto;
}
<form class="form">
  <label for="Txt">Label:</label>
  <input id="Txt" type="text" />
</form>

Upvotes: 1

Evince Development
Evince Development

Reputation: 347

You should be use this simple way.

Please try: width: calc(100% - 45px) !important; into input#Txt class.

Hope this help.

Let me know further clarification.

input#Txt {
width: calc(100% - 45px) !important;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <style>
        * { box-sizing: border-box; }
    </style>
</head>
<body>
    <form style="width: 500px; border-style:solid; border-color: red;">
        <label for="Txt">Label:</label>
        <input id="Txt" type="text" style="width: auto;" />
    </form>
</body>
</html>

Upvotes: 1

Related Questions