CODEWITHSUNDEEP
css
richb
richb

Reputation: 4896

width:auto for <input> fields

Newbie CSS question. I thought width:auto for a display:block element meant 'fill available space'. However for an <input> element this doesn't seem to be the case. For example:

<body>
  <form style='background:red'>
    <input type='text' style='background:green; display:block; width:auto'>
  </form>
</body>

Two questions then:

  1. Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section.

  2. Is there a way to achieve my expected behavior for a input field - ie. fill available space like other block level elements do?

Thanks!

Upvotes: 182

Views: 491526

Answers (15)

Moshe Kohavi
Moshe Kohavi

Reputation: 457

You can try this:

input {
  width: 0;
  min-width: 100%;
}

Upvotes: 0

Fabricio
Fabricio

Reputation: 944

ORIGINAL answer using Angular: Because input's width is controlled by it's size attribute, this is how I initialize an input width according to its content:

<input type="text" class="form-list-item-name" [size]="myInput.value.length || 1" #myInput>

UPDATE for JavaScript (10/01/2022): My original answer was from the time I was studying Angular. If you need pure, Vanilla JavaScript the solution is even simpler:

<input type="text" oninput="this.size = this.value.length">

Or add an "input" event listener to your input html element and run a code like this:

const myInput = document.querySelector('input');
myInput.addEventListener('input', this.typing);

(...)

typing(e) {
  e.target.setAttribute('size', e.target.value.length);
}

Obs: Depending on the browser, input may restore to its default size of something between 150px and 250px if/when size gets the 0 value. In this case, just add +1 to value.length:

<input type="text" oninput="this.size = this.value.length + 1">

OR:

typing(e) {
  e.target.setAttribute('size', e.target.value.length + 1);
}

Upvotes: 49

Alex
Alex

Reputation: 2339

There is a new css property for this: field-sizing.

At the time of writing (june 2024) it works only in Chromium based browsers. -> Can I use

In these this will work:

field-sizing: content;

Upvotes: 9

doraemon
doraemon

Reputation: 398

Jquery way of adjusting size of input automatically.

In general:

$('#my_input_id').width( ($('#my_input_id').val().length) + "ch" );

On text input:

$(document).on("input", '#my_input_id', function () {

    $(this).width( ($(this).val().length) + "ch" ); 
});

Upvotes: 0

Youth overturn
Youth overturn

Reputation: 417

I think the simplest solution is to set parent element's width:

form{
    width: 100%!important;
}

Upvotes: -2

G-Cyrillus
G-Cyrillus

Reputation: 105843

Nowdays, flex or grid makes it much easier , it overrides default style/behaviors of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#size which has a default value set at 20 see : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#size

Giving you 2 plain CSS options without requiring JavaScript nor setting width to 100% and deal with box-sizing.

flex/flex-grow
  <form style='background:red;display:flex;'>
    <input type='text' style='background:green; flex-grow:1'>
  </form>
grid
  <form style='background:red;display:grid;'>
    <input type='text' style='background:green;'>
  </form>

Upvotes: 0

Sailist
Sailist

Reputation: 164

After tried methods all above and failed, I workaround by modifying   width property in style by unit em:

tgt.style.width = `${(tgt.value.length + 1) / 2}em`

Upvotes: 0

shamaseen
shamaseen

Reputation: 2478

Using JQuery

$(document).on('input', '.input-fit-width', (e) => {
     $(e.currentTarget).attr('size',e.currentTarget.value.length);
})

Upvotes: 0

spiffytech
spiffytech

Reputation: 6582

If you're willing to include a little JavaScript to solve this, you can get exact sizing. This doesn't rely on approximating width with size or ems, doesn't rely on any hardcoded element widths, and works for e.g., type="number", which don't accept a size attribute.

The trick is to get your input sized exactly like a span with the same content, by actually having an invisible span with the same content.

Put your input inside a div along with a span that mirrors the input's value. Give both the input and the span the same styling, give the input 100% width, then hide the span and absolute-position the input to sit on top of the span.

This way, the container (and thus the input) are automatically sized by the visual appearance of the content of the invisible span.

codepen screenshot

https://codepen.io/spiffytech/pen/abwWRqo

<div id="relative-parent">
  <span id="size-calibration"></span>
  <input id="autosized-input" />
</div>

<style>
  #relative-parent {
    position: relative;
    /* Have some width if the input is empty */
    min-width: 1em;
    /* Adjust size to match the span */
    width: min-content;
  }

  #size-calibration {
    visibility: hidden;
    /* Prevent the span from wrapping the text when input value has multiple words, or collapsing multiple spaces into one */
    white-space: pre;
  }

  #autosized-input {
    position: absolute;
    left: 0;
    width: 100%;
  }
  
  #size-calibration, #autosized-input {
    /* Normalize styles that the browser sets differently between spans and inputs. 
    Ideally, use a "CSS reset" here. */
    font-family: "Arial";
    padding: 0;
    /* Demonstrate that this works for input with custom styles */
    font-size: 24px;
  }
</style>

<script>
  function updateSize() {
    const span = document.getElementById('size-calibration');
    const input = document.getElementById('autosized-input')
    span.innerText = input.value;
  }
  document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('autosized-input');
    input.oninput = updateSize;
    
    // Provide some initial content
    input.value = "I'm sized exactly right!"
    updateSize();
  })
</script>

Upvotes: 14

Akhil Gupta
Akhil Gupta

Reputation: 101

Answer 1 - "response" gave a nice answer/link for it. To put it in short, "auto" is the default, so it is like removing any changes in the width of an element

Answer 2 - use width: 100% instead. It will fill the 100% of the parent container, in this case, the "form".

Upvotes: 0

mwilcox
mwilcox

Reputation: 4132

It may not be exactly what you want, but my workaround is to apply the autowidth styling to a wrapper div - then set your input to 100%.

Upvotes: 6

response
response

Reputation: 371

"Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section."

No one actually answered the above part of the original poster's question.

Here's the answer: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container...

On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border... This may be what you want, but most likely it isn’t.

To visualise the difference I made an example: http://www.456bereastreet.com/lab/width-auto/

Upvotes: 37

Lajos M&#233;sz&#225;ros
Lajos M&#233;sz&#225;ros

Reputation: 3871

The only option I can think of is using width:100%. If you want to have a padding on the input field too, than just place a container label around it, move the formatting to that label instead, while also specify the padding to the label. Input fields are rigid.

Upvotes: 0

Jon Raasch
Jon Raasch

Reputation: 3983

As stated in the other answer, width: auto doesn't work due to the width being generated by the input's size attribute, which cannot be set to "auto" or anything similar.

There are a few workarounds you can use to cause it to play nicely with the box model, but nothing fantastic as far as I know.

First you can set the padding in the field using percentages, making sure that the width adds up to 100%, e.g.:

input {
  width: 98%;
  padding: 1%;
}

Another thing you might try is using absolute positioning, with left and right set to 0. Using this markup:

<fieldset>
    <input type="text" />
</fieldset>

And this CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

This absolute positioning will cause the input to fill the parent fieldset horizontally, regardless of the input's padding or margin. However a huge downside of this is that you now have to deal with the height of the fieldset, which will be 0 unless you set it. If your inputs are all the same height this will work for you, simply set the fieldset's height to whatever the input's height should be.

Other than this there are some JS solutions, but I don't like applying basic styling with JS.

Upvotes: 12

Ben
Ben

Reputation: 57209

An <input>'s width is generated from its size attribute. The default size is what's driving the auto width.

You could try width:100% as illustrated in my example below.

Doesn't fill width:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Fills width:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Smaller size, smaller width:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

UPDATE

Here's the best I could do after a few minutes. It's 1px off in FF, Chrome, and Safari, and perfect in IE. (The problem is #^&* IE applies borders differently than everyone else so it's not consistent.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

Upvotes: 120

Related Questions