Muhammad Arif Muhammad Arif - 7 months ago 6
Javascript Question

How to set field position when table height increses?

I make a dynamic form when i click add button one row add in a table but when i add more than 6 rows the table height covers fields,i make a dynamic form when i click add button one row add in a table but when i add more than 6 rows the table height covers fields how i set this?

Here is my code:

<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>
<tr>
<td colspan=7 width=800>
<div id="dataRows">
<div class="fieldRow" id="template">
<select class="items" name="items" style="width:127px; float:left;" id="items"><option value="1" selected="selected" disabled="disabled"></option></select>
<textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:211px; border-radius:0px; margin: -1px 0px 0;"></textarea>
<input type="text" name="unitprice" id="unitprice" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px 0px 0;">
<input type="text" name="quantity" id="quantity" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 0px 0;">
<select name="firsttax" id="firsttax" class="firsttax" style=" float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected" ></option></select>
<select name="secondtax" id="secondtax" class="secondtax" style="float:left; display: block; height: 31px; width:104px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select>
<input type="text" name="linetotal" id="linetotal" class="linetotal" placeholder="0.00" readonly style="float:left; display: block; height: 31px; width:104px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -2px 0px 0;">
<input type="button" class="button remove" id="btnDel" value="Remove Row" style="float:right; margin:0 -110px; color: #ffffff; background-color: #d9534f; border-color: #d43f3a; padding: 3px 10px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border:1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;" />
</div>
</div>
</td>
</tr>
<input type="hidden" id="itemscounter" name="itemscounter" value=""/>
<tr>
<td colspan=7 rowspan=2 width=800 style="border:0px solid white;">
<div style="border:1px solid #DDDDDD; width:317px; height:50px; margin:0 -1px; float:right;">
<label class="required" id="invoicetotal" for="Invoicetotal" style="padding-top:3px;">Invoice Total(USD)</label>
<span style=" font-weight:bold; margin:4px -204px 0; float:right;">$</span>
<input type="text" class="required" id="invoicetotalamount" name="invoicetotalamount" placeholder="0.00" readonly style=" color:#526273; font-weight:bold; text-align:left; border: 0px solid #000000;"/><br>
<label class="required" id="paidtodate" for="paidtodate" style="margin-top: -6px;">Paid to date</label>
<input type="text" class="required" id="paidtodateamount" name="paidtodateamount" placeholder="0.00" style=" color:#526273; font-weight:bold; text-align:right; border: 0px solid #000000;"/>
</div>
<div class="clear"></div>
<div style="border:1px solid #DDDDDD; width:317px; height:33px; margin:50px -316px 0; float:right;">
<label class="required" id="balance" for="balance" style="margin-top:0px;">Balance(USD)</label>
<span style=" font-weight:bold; margin:7px 45px 0; float:left;">$</span>
<input type="text" class="required" id="balanceamount" name="balanceamount" placeholder="0.00" readonly style=" color:#526273; font-weight:bold; text-align:left; border: 0px solid #000000;"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<label class="required" for="invoices_invoicesbundle_invoicestype_notes">Notes</label>
<input id="invoices_invoicesbundle_invoicestype_notes" type="text" maxlength="255" required="required" name="invoices_invoicesbundle_invoicestype[notes]">


and here is my css:

#table{
float: left;
height: 200px;
margin: -291px 19px 0;
width: 825px;
}

#invoices_invoicesbundle_invoicestype_notes{
margin-top:250px;
}


here is my error:

enter image description here

Answer

The notes input should normally follow the flow if more rows are added. Looks like a float clear issue. Please see if adding to #table css

overflow:hidden;

helps.

If not you might need to add more height to the table in your jquery code on the "add handler". For that we need code though But from the code you showed it more looks like the first

UPDATE:

Then try to clear your table float by wrapping a div around the input like this ( used inline style now, just for testing )

<div style="clear: left;">
<label class="required" for="invoices_invoicesbundle_invoicestype_notes">Notes</label>
<input id="invoices_invoicesbundle_invoicestype_notes" type="text" maxlength="255" required="required" name="invoices_invoicesbundle_invoicestype[notes]">
</div>