After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do so. Style input element to fill remaining width of its container
The issue I'm encountering is that all the input elements only stretch as far as the end of the form section. I suspect that the problem lies with the form itself rather than the input boxes. How can I ensure that the form extends to the width of its parent? Below is the full code for reference.
<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">❌ </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>
<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>
<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>
<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>
<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>
<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>
<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>