How to make my buttons shift downwards when my table grows-CodePudding

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}" >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/[email protected]/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 >
                <form div >
                    <table>
                        <div ></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 >
                    <table class='table' id='formTable'>
                        <div ></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 >
                <div ></div>         
                <button type="button"  id='add' >  Add New Asset</button> 
            </div> 
            <br>
            <div >
                <div ></div>      
                <button type="button"  id='save'>SAVE</button>
                <button   type="submit" id='submit' >SUBMIT</button>
                <button type="button"  onclick="window.print();return false;"/>EXPORT PDF</button>
            </div> 
            </form>

                

                   
    </div>
    </body>
</html>

CodePudding user response：

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}" >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/[email protected]/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 >
    <form div >
      <table>
        <div ></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 >
    <table class='table' id='formTable'>
      <div ></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 >
    <div ></div>
    <button type="button"  id='add'>  Add New Asset</button>
  </div>
  <br>
  <div >
    <div ></div>
    <button type="button"  id='save'>SAVE</button>
    <button  type="submit" id='submit'>SUBMIT</button>
    <button type="button"  onclick="window.print();return false;" />EXPORT PDF</button>
  </div>
  </form>




  </div>
</body>

</html>

CodePudding user response：

The way I've done this in the past is to iterate a row count for each <tr> tag as the table is created. This helps with sorting, and you can easily specify a sort order.

However, since your table is pre-existing, the only answer I can really see is to simply rebuild the entire table and flow it into the correct element (the table element, in your case). No row order required, just put the rows in, in the order you want them.

This link may also help: https://makitweb.com/sorting-the-table-by-clicking-header-with-ajax/

I hope that helps a little.