Position button below table is not working

Question

Position button below table is not working

Navigation

#1 by (1 votes)

1

With this HTML I can not position the buttons below the table. I tried several ways, the current one was another attempt.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <form style="width:400px; margin: 0 auto;">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let operator of dataSource">
                            <td>{{ operator.operatorId }}</td>
                            <td>{{ operator.name }}</td>
                        </tr>
                    </tbody>
                </table>                
            </form>          
      </div>
      <button type="submit" class="btn btn-primary" >Atualizar</button>
      <button type="submit" class="btn btn-primary" >Deletar</button>  
    </div>
</div>

See how the Update and Delete buttons appear.

html css angular angular-6

asked by anonymous 17.07.2018 / 18:16

1 answer

How to avoid double insert with different primary key mysql Comparing similarity in two arrays!

score 1 · Accepted Answer

The ideal would be to "encapsulate" the BTNs within a .row as the documentation says. Also, I do not see why you put your <table> inside a <form>

Test with this code to see if it works. Notice that I changed the tag form to a div and separated the btns into another row

NOTE: This code works on BS3 no 4

Tip: Check to inspect the elements or your CSS if the first .row with the table is not set with position:absolute .

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


  <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div style="width:400px; margin: 0 auto;">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let operator of dataSource">
                            <td>{{ operator.operatorId }}</td>
                            <td>{{ operator.name }}</td>
                        </tr>
                    </tbody>
                </table>                
            </div>          
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <button type="submit" class="btn btn-primary" >Deletar</button>  
        <button type="submit" class="btn btn-primary" >Atualizar</button>
      </div>
    </div>  
</div>