Dynamic auto input text width with css

Question

I am not sure how easy this is, but because I usually code in php and output the html, I can do any calculations from there

The problem:

I have a simple form, and I want the input text fields to start right after the labels, but end at the same position. i.e. have a max of date of birth, and then expand everyone up to there

I tried some things with max-width/min-width and width but nothing seems to work

.input_field {
    max-width:150px;
    width:100%;
}

I would prefer a non javascript solution if possible!

have you considered how usable this will be with the labels and field alignment all messed up? all evidence points towards aligned fields and labels being best for the user when it comes to actually filling in a form — Toni Leigh
– Toni Leigh, Commented Jul 9, 2015 at 8:18
@Alexandros why not wrap them into div with fixed width, and set the label into 'float:left' and the input to 'float:right' — Pro Dev
– Pro Dev, Commented Jul 9, 2015 at 8:24
@Alexandros - then your designers ought to learn a little about form usability — Toni Leigh
– Toni Leigh, Commented Jul 9, 2015 at 9:08

Fabrizio Calderan · Accepted Answer · 2015-07-09 09:18:28Z

3

An example using FlexBox: you could also set a width (or min/max-width to the form element (or to ul element)

Codepen: http://codepen.io/anon/pen/oXdbab

HTML

<form>

  <ul>

    <li>
      <label>Label regular</label>
      <input type="text" />
    </li>

    <li>
      <label>Label2 really really longer</label>
      <input type="text" />
    </li>

    <li>
      <label>Label</label>
      <input type="text" />
    </li>

  </ul>

</form>

CSS

form ul { 
  list-style: none; 
  margin: 20px 0; padding: 0; 
  max-width: 500px;
}

form li {
   display: flex;
   margin: 10px 0 0 0;
}

form input {
  margin-left: 2em;
  flex-grow: 1;
}

Result

enter image description here

Final note: Flexbox module is not supported on IE<10. but, on those browser only, you may use a script inside a conditional comment, e.g.

<!--[if lte IE 9]>
   <script>
      ...
   </script>
<![endif]-->

edited Jul 9, 2015 at 9:18

answered Jul 9, 2015 at 8:11

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

6 Comments

hahaha Over a year ago

how will this react to older browsers and ie?? i met flex somewhere else and found a problem with other browsers

Fabrizio Calderan Over a year ago

older browser will show the form as in your example so the form is still usable. If you have specific requirements you should specify them in your question

Toni Leigh Over a year ago

pretty good actually, caniuse.com/#search=flex-box - all you lose though is a bit of styling in IE

hahaha Over a year ago

well, its not a request but it would be better if :), ill give 10-15mins more and if there are no better answers then ill mark you as the one

Toni Leigh Over a year ago

ironically you might end up with a more usable form on older browsers :-P

|

Collectives™ on Stack Overflow

Dynamic auto input text width with css

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related