I am encountering an issue with my dynamic form. When I click on the add button, a new row is added to the table. However, once there are more than 6 rows added, the table height starts covering the fields. How can I go about setting this so that the fields remain visible?
Below is the code snippet:
<div id="table">
<table class="table table-bordered" style="border:1px solid white;">
<thead>
<tr>
<th style="text-align:left; width:120px;">Item</th>
<th style="text-align:left; width:200px;">Description</th>
<th style="width:100px;">Unit Cost</th>
<th style="text-align:right; width:60px;">Qty</th>
<th style="text-align:left; width:100px;">Tax</th>
<th style="text-align:left; width:100px;">Tax</th>
<th style="text-align:left; width:100px;">Line Total</th>
</tr>
</thead>
<tbody>
...
Snippet of the CSS used:
#table{
float: left;
height: 200px;
margin: -291px 19px 0;
width: 825px;
}
#invoices_invoicesbundle_invoicestype_notes{
margin-top:250px;
}
Error message displayed: