How to make text-boxes fit parent DIV with labels?

Question

This is the code I have for producing a div that is 100% the width of the content area, and has a thin grey border around it. Inside it has a bunch of inputs. If you notice, each input has a specified size. It works perfectly if your screen is exactly the same size as mine and your browser isn't even slightly minimized. When either of those things happen, the inputs will render below the labels, and the form gets confusing.

I can't figure out a way to make the width of those text-boxes dynamic, so that the text box fits the width remaining in the parent DIV after label.

<div class="text_container_border">
      Foobar Label: <input name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/>
                                        <br />
      Foobar Label 2: <input name="foobar_2" size="60" type="text" class="hidden_textfield" value=""/>
      <br />
      Foobar Label 3: <input name="foobar_3" size="60" type="text" class="hidden_textfield" value=""/>
      <br />
      Small Foobar: <input name="small_foobar" size="20" type="text" class="hidden_textfield" value=""/>
      Smaller Foobar: <input maxlength="14" name="smaller_foobar" size="14" type="text" class="hidden_textfield" value=""/>
      Smallest Foobar: <input maxlength="10" name="smallest_foobar" size="35" type="text" class="hidden_textfield" value=""/>
</div>

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

Take a look at this question on So.It displays the label along with the text area for the div even after resize.

edited May 23 '17 at 12:29

Community

1
1

answered Apr 05 '15 at 10:59

avinash pandey

1,321
2
11
15

I'm having trouble implementing it. I'm fairly certain it has to do with the absence of table rows in my form? http://jsfiddle.net/ugngp7ft/ – Allenph Apr 05 '15 at 11:45

Boris · Answer 2 · 2015-04-05T11:25:20.833

0

Without the CSS for the class .text_container_border I am not sure how big the border is, but the size of the border must be taken into consideration when calculating width; if the width is 100%, that is 100% + border size (left + right) so it may overflow; that is, if you have a n all around border and it adds 1px to both the left and the right sides, that is 2px of extra width. The CSS width property would help here, as opposed to the size property.

Also, for valid HTML a label must be used with inputs. Give the label a for="" and match it to an id on the input:

<label for="1">Foobar Label: </label>
<input id="1" name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/>

Here is a Fiddle: https://fiddle.jshell.net/4b4u2anb/

To prevent breaking labels, add the CSS:

label {
    white-space: nowrap;
}

Fiddle

edited Apr 05 '15 at 11:25

answered Apr 05 '15 at 11:04

Boris

566
5
21

Here is a fiddle updated with my CSS. https://fiddle.jshell.net/4b4u2anb/1/ Notice how the textbox falls underneath the label? I can't have that... – Allenph Apr 05 '15 at 11:13
I do not notice as I can't see a textbox at all; I see the .hidden_textfield is making them invisible. Are you trying to move the "Small Foobar" on the right to the bottom, so it clears the other elements? When I make the window smaller in width, the word Foobar falls underneath the label (i.e., the label is split). Adding the css of {white-space: nowrap} fixes this; I have updated my answer with a Fiddle and additional code. – Boris Apr 05 '15 at 11:23

Venkatesh Panabaka · Answer 3 · 2015-04-05T11:45:34.050

Here is the working example of exact your requirement.You can minimize the windows the text box will not goes to second line.

I modified your code and I added some css code. It's working fine.

.css1 {
    display: table;
    width: 100%;
}

span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}

.text {
    width: 100%;
}

<div class="text_container_border">
   <div class="css1">
   <font style=" white-space: nowrap;">Foobar Label: </font>
   <span>  <input class=".text" name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/>  </span>
        </div>
  </br>
  
   <div class="css1">
    <font style=" white-space: nowrap;">Foobar Label 2: </font>
   <span>  <input class=".text" name="foobar_2" size="60" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
        <br>
  
  
  <div class="css1">
   <font style=" white-space: nowrap;">Foobar Label 3: </font>
   <span>  <input class=".text" name="foobar_3" size="60" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
   <br>
   
   
  <div class="css1">
   <font style=" white-space: nowrap;">Small Foobar: </font>
      <span>  <input class=".text" name="small_foobar" size="20" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
   <br>
   
   
  <div class="css1">
   <font style=" white-space: nowrap;"> Smaller Foobar: </font>
   <span>  <input class=".text" maxlength="14" name="smaller_foobar" size="14" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
   <br>
   
  <div class="css1">
    <font style=" white-space: nowrap;"> Smallest Foobar: </font>
   <span>  <input class=".text" maxlength="10" name="smallest_foobar" size="35" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
   <br>
   

</div>

Not quite. Avinash Pandey's link above is exactly what I would like...however I'm having trouble implementing it. I'm fairly certain it has to do with the absence of table rows in my form? http://jsfiddle.net/ugngp7ft/ — Allenph, Apr 05 '15 at 11:44

How to make text-boxes fit parent DIV with labels?

3 Answers3