I have an issue with my HTML, where when I go to add more than 3 new assets into my table, the buttons below (Add new asset, save and submit) are not being pushed down. Is this a flex issue and how would I go about solving this? I put all of my buttons into a div because I found this aligned my page better. But when I did not have my buttons in a div, it works. I am reframing my code to have more div’s to keep everything contained.
$('document').ready(() => { // Handler to Add New Asset const table = $("#formTable tbody"); let count = 1; $('#add').click(() => { const newRow = ` <tr index="${count}"> <form> <td><input id='asset_tag_no${count}' type='text' bottom required /></td> <td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td> <td><input id='description${count}' type='text'/></td> <td><input id='cost${count}' type='value'/></td> <td><input id='po_no${count}' type='text' /></td> <td><input id='rc_to_credit${count}' type='text'/></td> <td><input id='remarks${count}' type='text'/></td> <td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td> </form> </tr> `; table.append(newRow); // Handler to Remove New Asset $('.btn-remove').click(function(){ let index = $(this).attr('index'); $(`tr[index='${index}'`).remove(); }); count++; }); })
.header{ text-align: center; margin-bottom: 50px; } h1, h2{ font-size: 1rem; } /* table{ font-size: 10pt; } */ @media screen { input{ text-align: center; } input#date{ width: -webkit-fill-available; } .flex { display: flex; flex: auto; height: 100px; /* border: 1px solid red; */ } .flex-box { width: 40px; height: 1000px; /* background: pink; */ } .button{ display: flex; /* display: inline !important; */ flex: auto; height: 40px; gap: 12px; } .btn-remove{ padding: 5px; width: 25px; height: 25px; font-size: 0.7rem; font-weight: bold; } }
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- BOOTSTRAP + JQUERY --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="./css/disposal.css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="./js/./disposal.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <body> <div class="wrapper"> <form div class="flex"> <table> <div class="flex-box"></div> <tr> <td align="right" id='date'><b>Date:</b></td> <td align="left"><input type="date" id="date" /></td> </tr> <tr> <td align="right" id='department'><b>Dept/Division:</b></td> <td align="left"><input type="text" id="department" /></td> </tr> <tr> <td align="right" id='location'><b>Location:</b></td> <td align="left"><input type="text" id="location" /></td> </tr> <tr> <td align="right" id='resp'><b>Resp. Ctr:</b></td> <td align="left"><input type="text" id="resp" /></td> </tr> </table> </div> <br><br><br><br> <div class="flex"> <table class='table' id='formTable'> <div class="flex-box"></div> <tr> <th>  Asset Tag No.</th> <th>Manufacturer Serial No.</th> <th>   Description</th> <th>  Cost/ Est. Cost</th> <th>  Method of Disposal</th> <th>  RC to Credit</th> <th>   Remarks</th> </tr> </table> </div> <br><br><br><br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='add' >+ Add New Asset</button> </div> <br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='save'>SAVE</button> <button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button> <button type="button" class="btn btn-secondary" onclick="window.print();return false;"/>EXPORT PDF</button> </div> </form> </div> </body> </html>
Advertisement
Answer
You had added heights for both .flex and .flex-box. This was forcing them to stay the size they were.
Also, you didn’t need the form tags for each row.
$('document').ready(() => { // Handler to Add New Asset const table = $("#formTable tbody"); let count = 1; $('#add').click(() => { const newRow = ` <tr index="${count}"> <td><input id='asset_tag_no${count}' type='text' bottom required /></td> <td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td> <td><input id='description${count}' type='text'/></td> <td><input id='cost${count}' type='value'/></td> <td><input id='po_no${count}' type='text' /></td> <td><input id='rc_to_credit${count}' type='text'/></td> <td><input id='remarks${count}' type='text'/></td> <td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td> </tr> `; table.append(newRow); // Handler to Remove New Asset $('.btn-remove').click(function() { let index = $(this).attr('index'); $(`tr[index='${index}'`).remove(); }); count++; }); })
.header { text-align: center; margin-bottom: 50px; } h1, h2 { font-size: 1rem; } /* table{ font-size: 10pt; } */ @media screen { input { text-align: center; } input#date { width: -webkit-fill-available; } .flex { display: flex; flex: auto; } .flex-box { width: 40px; /* background: pink; */ } .button { display: flex; /* display: inline !important; */ flex: auto; height: 40px; gap: 12px; } .btn-remove { padding: 5px; width: 25px; height: 25px; font-size: 0.7rem; font-weight: bold; } }
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- BOOTSTRAP + JQUERY --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="./css/disposal.css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="./js/./disposal.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <body> <div class="wrapper"> <form div class="flex"> <table> <div class="flex-box"></div> <tr> <td align="right" id='date'><b>Date:</b></td> <td align="left"><input type="date" id="date" /></td> </tr> <tr> <td align="right" id='department'><b>Dept/Division:</b></td> <td align="left"><input type="text" id="department" /></td> </tr> <tr> <td align="right" id='location'><b>Location:</b></td> <td align="left"><input type="text" id="location" /></td> </tr> <tr> <td align="right" id='resp'><b>Resp. Ctr:</b></td> <td align="left"><input type="text" id="resp" /></td> </tr> </table> </div> <br><br><br><br> <div class="flex"> <table class='table' id='formTable'> <div class="flex-box"></div> <tr> <th>  Asset Tag No.</th> <th>Manufacturer Serial No.</th> <th>   Description</th> <th>  Cost/ Est. Cost</th> <th>  Method of Disposal</th> <th>  RC to Credit</th> <th>   Remarks</th> </tr> </table> </div> <br><br><br><br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='add'>+ Add New Asset</button> </div> <br> <div class="button"> <div class="flex-box"></div> <button type="button" class="btn btn-outline-primary" id='save'>SAVE</button> <button class="btn btn-primary" type="submit" id='submit'>SUBMIT</button> <button type="button" class="btn btn-secondary" onclick="window.print();return false;" />EXPORT PDF</button> </div> </form> </div> </body> </html>