How to make my buttons shift downwards when my table grows

Question

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 = `
                        
                
                    
                        
                        
                        
                        
                        
                        
                        
                        
                    
                
        `;

        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;
    }

}



    
    
    
    
    
    
    
    
     

    

        
                
                    

                        
                        
                            Date:
                            
                        
                        
                            Dept/Division:
                            
                        
                        
                            Location:
                            
                        
                        
                            Resp. Ctr:
                            
                        
                        
                    
                    





            
                    

                        
                            
                                  Asset Tag No.
                                Manufacturer Serial No.
                                   Description
                                  Cost/ Est. Cost
                                  Method of Disposal
                                  RC to Credit
                                   Remarks

user_3374488 · Answer

The way I've done this in the past is to iterate a row count for each 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.

I hope that helps a little.

user_933198 · 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 = `                        
                
                    
                    
                    
                    
                    
                    
                    
                    
                
        `;

    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;
  }
}















  
    
      

        
        
          Date:
          
        
        
          Dept/Division:
          
        
        
          Location:
          
        
        
          Resp. Ctr:
          
        

      
  
  




  
    

      
      
          Asset Tag No.
        Manufacturer Serial No.
           Description
          Cost/ Est. Cost
          Method of Disposal
          RC to Credit
           Remarks

How to make my buttons shift downwards when my table grows

2 Answers