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.
JavaScript
x
34
34
1
$('document').ready(() => {2
3
// Handler to Add New Asset4
const table = $("#formTable tbody");5
let count = 1;6
7
$('#add').click(() => {8
9
const newRow = `10
11
<tr index="${count}">12
<form>13
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>14
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>15
<td><input id='description${count}' type='text'/></td>16
<td><input id='cost${count}' type='value'/></td>17
<td><input id='po_no${count}' type='text' /></td>18
<td><input id='rc_to_credit${count}' type='text'/></td>19
<td><input id='remarks${count}' type='text'/></td>20
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>21
</form>22
</tr>23
`;24
25
table.append(newRow);26
// Handler to Remove New Asset27
$('.btn-remove').click(function(){28
let index = $(this).attr('index');29
$(`tr[index='${index}'`).remove();30
});31
32
count++;33
});34
})JavaScript
1
50
50
1
.header{2
text-align: center;3
margin-bottom: 50px;4
}5
6
h1, h2{7
font-size: 1rem;8
}9
10
11
/* table{12
font-size: 10pt;13
} */14
15
16
@media screen {17
input{18
text-align: center;19
} 20
input#date{21
width: -webkit-fill-available;22
}23
.flex {24
display: flex;25
flex: auto;26
height: 100px;27
/* border: 1px solid red; */28
}29
.flex-box {30
width: 40px;31
height: 1000px;32
/* background: pink; */33
}34
.button{35
display: flex;36
/* display: inline !important; */37
flex: auto;38
height: 40px;39
gap: 12px;40
}41
42
.btn-remove{43
padding: 5px;44
width: 25px;45
height: 25px;46
font-size: 0.7rem;47
font-weight: bold;48
}49
50
}JavaScript
1
72
72
1
<!DOCTYPE html>2
<html lang="en">3
<meta charset="UTF-8">4
<meta name="viewport" content="width=device-width,initial-scale=1">5
<!-- BOOTSTRAP + JQUERY -->6
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">7
<link rel="stylesheet" href="./css/disposal.css" />8
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>9
<script src="./js/./disposal.js"></script>10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>11
12
13
<body>14
15
<div class="wrapper">16
<form div class="flex">17
<table>18
<div class="flex-box"></div>19
<tr>20
<td align="right" id='date'><b>Date:</b></td>21
<td align="left"><input type="date" id="date" /></td>22
</tr>23
<tr>24
<td align="right" id='department'><b>Dept/Division:</b></td>25
<td align="left"><input type="text" id="department" /></td>26
</tr>27
<tr>28
<td align="right" id='location'><b>Location:</b></td>29
<td align="left"><input type="text" id="location" /></td>30
</tr>31
<tr>32
<td align="right" id='resp'><b>Resp. Ctr:</b></td>33
<td align="left"><input type="text" id="resp" /></td>34
</tr>35
36
</table>37
</div>38
<br><br><br><br>39
<div class="flex">40
<table class='table' id='formTable'>41
<div class="flex-box"></div>42
<tr>43
<th>  Asset Tag No.</th>44
<th>Manufacturer Serial No.</th>45
<th>   Description</th>46
<th>  Cost/ Est. Cost</th>47
<th>  Method of Disposal</th>48
<th>  RC to Credit</th>49
<th>   Remarks</th>50
</tr>51
</table>52
</div>53
<br><br><br><br> 54
<div class="button">55
<div class="flex-box"></div> 56
<button type="button" class="btn btn-outline-primary" id='add' >+ Add New Asset</button> 57
</div> 58
<br>59
<div class="button">60
<div class="flex-box"></div> 61
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>62
<button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button>63
<button type="button" class="btn btn-secondary" onclick="window.print();return false;"/>EXPORT PDF</button>64
</div> 65
</form>66
67
68
69
70
</div>71
</body>72
</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.
JavaScript
1
31
31
1
$('document').ready(() => {2
3
// Handler to Add New Asset4
const table = $("#formTable tbody");5
let count = 1;6
7
$('#add').click(() => {8
9
const newRow = ` 10
<tr index="${count}">11
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>12
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>13
<td><input id='description${count}' type='text'/></td>14
<td><input id='cost${count}' type='value'/></td>15
<td><input id='po_no${count}' type='text' /></td>16
<td><input id='rc_to_credit${count}' type='text'/></td>17
<td><input id='remarks${count}' type='text'/></td>18
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>19
</tr>20
`;21
22
table.append(newRow);23
// Handler to Remove New Asset24
$('.btn-remove').click(function() {25
let index = $(this).attr('index');26
$(`tr[index='${index}'`).remove();27
});28
29
count++;30
});31
})JavaScript
1
45
45
1
.header {2
text-align: center;3
margin-bottom: 50px;4
}5
6
h1,7
h2 {8
font-size: 1rem;9
}10
11
12
/* table{13
font-size: 10pt;14
} */15
16
@media screen {17
input {18
text-align: center;19
}20
input#date {21
width: -webkit-fill-available;22
}23
.flex {24
display: flex;25
flex: auto;26
}27
.flex-box {28
width: 40px;29
/* background: pink; */30
}31
.button {32
display: flex;33
/* display: inline !important; */34
flex: auto;35
height: 40px;36
gap: 12px;37
}38
.btn-remove {39
padding: 5px;40
width: 25px;41
height: 25px;42
font-size: 0.7rem;43
font-weight: bold;44
}45
}JavaScript
1
73
73
1
<!DOCTYPE html>2
<html lang="en">3
<meta charset="UTF-8">4
<meta name="viewport" content="width=device-width,initial-scale=1">5
<!-- BOOTSTRAP + JQUERY -->6
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">7
<link rel="stylesheet" href="./css/disposal.css" />8
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>9
<script src="./js/./disposal.js"></script>10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>11
12
13
<body>14
15
<div class="wrapper">16
<form div class="flex">17
<table>18
<div class="flex-box"></div>19
<tr>20
<td align="right" id='date'><b>Date:</b></td>21
<td align="left"><input type="date" id="date" /></td>22
</tr>23
<tr>24
<td align="right" id='department'><b>Dept/Division:</b></td>25
<td align="left"><input type="text" id="department" /></td>26
</tr>27
<tr>28
<td align="right" id='location'><b>Location:</b></td>29
<td align="left"><input type="text" id="location" /></td>30
</tr>31
<tr>32
<td align="right" id='resp'><b>Resp. Ctr:</b></td>33
<td align="left"><input type="text" id="resp" /></td>34
</tr>35
36
</table>37
</div>38
<br><br><br><br>39
<div class="flex">40
<table class='table' id='formTable'>41
<div class="flex-box"></div>42
<tr>43
<th>  Asset Tag No.</th>44
<th>Manufacturer Serial No.</th>45
<th>   Description</th>46
<th>  Cost/ Est. Cost</th>47
<th>  Method of Disposal</th>48
<th>  RC to Credit</th>49
<th>   Remarks</th>50
</tr>51
</table>52
</div>53
<br><br><br><br>54
<div class="button">55
<div class="flex-box"></div>56
<button type="button" class="btn btn-outline-primary" id='add'>+ Add New Asset</button>57
</div>58
<br>59
<div class="button">60
<div class="flex-box"></div>61
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>62
<button class="btn btn-primary" type="submit" id='submit'>SUBMIT</button>63
<button type="button" class="btn btn-secondary" onclick="window.print();return false;" />EXPORT PDF</button>64
</div>65
</form>66
67
68
69
70
</div>71
</body>72
73
</html>