Starta button on the side and not under the mat-table

Question

Starta button on the side and not under the mat-table

Navigation

#1 by (1 votes)

0

I have this html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div>
  <table mat-table [dataSource] = "dataSource" class="mat-elevation-z8">

     <ng-container matColumnDef="codigo">
       <th mat-header-cell *matHeaderCellDef> Codigo </th>
       <td mat-cell *matCellDef="let oper"> {{oper.operatorId}} </td>
    </ng-container>

    <ng-container matColumnDef="nome">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let oper"> {{oper.name}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let oper; columns: displayedColumns;"></tr>
    </table>
</div>

<div>
   <button type="button" class="btn btn-primary">Primary</button>
</div>

When I render the Test button it is on the left side, but next to the Table and not underneath. How do I solve it?

html typescript angular angular-6

asked by anonymous 11.07.2018 / 20:40

1 answer

Creating urls htaccess automatic limiting minimum amount of characters Align these images and HTML and CSS texts in the "correct"

score 1 · Answer 1

To use Bootstrap Grid you need to use the framework classes. Both in the Table and in the divs where you put your components.

  Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Use rows to create horizontal groups of columns.   Content should be placed within columns, and only columns may be immediate children of rows.

Lines should be placed within a .container (fixed width) or .container-fluid (full width) for proper alignment and fill.

Use rows to create horizontal column groups. Content must be placed within columns and only cols can be immediate children of .rows .

See in the template below the classes I used to format the layout of divs

Official table documentation link

Official Grid Documentation link

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <div class="container">
        <div class="row">
            <div class="com-xs-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <button type="button" class="btn btn-primary">Primary</button>
            </div>
        </div>
    </div>