How to make my buttons shift downwards when my tab…

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>&emsp;&emsp;Asset Tag No.</th>
                                <th>Manufacturer Serial No.</th>
                                <th>&emsp;&emsp;&ensp;Description</th>
                                <th>&emsp;&emsp;Cost/ Est. Cost</th>
                                <th>&emsp;&thinsp;Method of Disposal</th>
                                <th>&emsp;&emsp;RC to Credit</th>
                                <th>&emsp;&emsp;&emsp;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>

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>&emsp;&emsp;Asset Tag No.</th>
        <th>Manufacturer Serial No.</th>
        <th>&emsp;&emsp;&ensp;Description</th>
        <th>&emsp;&emsp;Cost/ Est. Cost</th>
        <th>&emsp;&thinsp;Method of Disposal</th>
        <th>&emsp;&emsp;RC to Credit</th>
        <th>&emsp;&emsp;&emsp;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>

How to make my buttons shift downwards when my table grows

Advertisement

Answer