Have a input box fill the remainder of the html page

Question

I have looked at a lot of these pages and questions with this. I have found the right answer but I cannot figure it out to save my life. I want to do something very similar to the second question, but I cannot figure out how to do it. Style input element to fill remaining width of its container

What I am trying to do is have all the input stretch the whole way to the other side, but they are just stopping at the end of the form section. I feel that the form is my issue and not the input boxes. How do I get the form to stretch to the width of its parent. I have attached the whole code now to see if that helps.

<style>

div.modal-header{background-color: #1A2930; color: white; }
div.modal-footer{ background-color: #1A2930; color: white; }

div.modal-body{ background-color: #F0F0F0;  color: #0A1612; width: 100%; }
div.movement-modal-form{ width: 100%; }

label
{
float: left;
font-size: 20px
}
span{
display: block;
overflow: hidden;
width: 100%
}

input
{
background-color: #C5C1C0; 
border: solid 2px #0A1612;
color: black;
width: 100%;
height: 25px; 
font-size:12px; 
vertical-align:0px
}
textarea
{
background-color: #C5C1C0;
border: solid 2px #0A1612;
width : 100%
}

</style>

<div id="movement-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&#x274C;  </button>
    <h4 id="modal-title" class="modal-title">{{#i18n}}inventory.modify.button.new-movement{{/i18n}}</h4>
  </div>

  <div class="modal-body">
    <form id="movement-modal-form"
    >
      {{>inventory/partials/movement-id-field-modal}}
      {{>inventory/partials/product-fields-modal}}
      <br/>
      <p>
      <!--This is #4--> 

            <label id="movement-lable"  for="movement-date">{{#i18n}}inventory.modify.table.movement-date{{/i18n}}</label>&nbsp;
            <input id="movement-date" class="movement-date" type="date" required>
      </p>
      <br/>
      <p>
      <!--This is #5-->
            <label for="store-from">{{#i18n}}inventory.modify.table.store-from{{/i18n}}</label>&nbsp;
            <br/>
            <br/>
            <select id="store-from" class="store-from"required>
                {{#inventoryStoreList}}
                    <option value={{ id }}>{{ name }}</option>
                {{/inventoryStoreList}}
        </select>
      </p>
      <br/>
      <p>

      <!--this is # 6-->
            <label for="store-from-current-quantity">{{#i18n}}inventory.movement.modal.store-from-current-quantity{{/i18n}}</label>&nbsp;
            <input id="store-from-current-quantity" class="store-from-current-quantity" type="text" disabled>
      </p>
      <br/>
      <p>

      <!--This is # 7-->
            <label for="store-to">{{#i18n}}inventory.modify.table.store-to{{/i18n}}</label>&nbsp;
            <select id="store-to" class="store-to" required>
                {{#inventoryStoreList}}
                    <option value={{ id }}>{{ name }}</option>
                {{/inventoryStoreList}}
            </select>
      </p>
      <br/>
      <p>
      <!--8-->
            <label for="store-to-current-quantity">{{#i18n}}inventory.movement.modal.store-to-current-quantity{{/i18n}}</label>&nbsp;
            <input id="store-to-current-quantity" class="product-current-quantity" type="text" disabled>
      </p>
      <br/>
      <p>
      <!--9-->
            <label for="movement-quantity">{{#i18n}}inventory.modify.table.quantity-requested{{/i18n}}</label>&nbsp;
            <input id="movement-quantity" class="movement-quantity" type="number" step="1" min="1" pattern="\d*" required>
      </p>
      <br/>
      <!--10 Notes-->
      {{>inventory/partials/note-field-modal}}
      <input type="submit" style="display: none">
    </form>
  </div>


  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal" style="float: left">{{#i18n}}inventory.modify.button.cancel{{/i18n}}</button>
    <button id="movement-modal-submit" type="button" class="btn btn-success" style="float: right">{{#i18n}}inventory.movement.modal.button.save{{/i18n}}</button>
  </div>
</div>

Try giving the code you posted a second look @MNM. There are tags that are not closed properly and pretty much all your CSS is missing. What you want to achieve isn't clear to most of us without being able to see what you currently have. — Angel Politis, Oct 04 '16 at 03:41
Please show all of the code or create a jsfiddle.com or both. — user2684452, Oct 04 '16 at 03:56

score 1 · Answer 1 · answered Oct 04 '16 at 03:54

It looks like your modal-body.width value isn't working like you intend. I'm not sure if your question is clear, but it looks like you want the input to be the width of the modal-body.

If that is the case, then you could just set the width on the movement-date class to 100%. This will set the width of the input element to be 100% width of the parent element, in this case, the modal-body.

div.modal-body{
   background-color: white;
   color: black;
   margin: 20px 0 20px 0;
   padding: 15px;
   width: 500px;
   overflow: hidden;
 }

 input.movement-date {
   background-color:lightgray; 
   border: solid 2px #6E6E6E;
   width: 100%;
   height: 25px; 
   font-size:12px; 
   vertical-align:0px;
}

<div class="modal-body">
    <form id="movement-modal-form">
      <p>
         <label id="movement-lable"  for="movement-date"></label>
         <input id="movement-date" class="movement-date" type="date" required/>
     </p>
   </form>
</div>

This has got me on the right track, but not fixed yet. Thank you for this — MNM, Oct 04 '16 at 07:02
Try removing the overflow attribute and padding from the modal-body. — Brian Nystrom, Oct 05 '16 at 02:41

Have a input box fill the remainder of the html page

1 Answers1