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

Asked

Viewed 112 times

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 rescan the Test button is on the left side, but next to the Table and not down. How do I fix?

html angular typescript angular-6
  • 1

    you can try placing the class="Row" on the Divs that surround the table and the button for the bootstrap to render as lines.

1 answer

1

To use the 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 inside a .container (fixed width) or .container-fluid (full width) for proper alignment and filling.

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

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

Official table documentation https://getbootstrap.com/docs/3.3/css/#Tables

Official documentation of Grid https://getbootstrap.com/docs/3.3/css/#grid

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

Browser other questions tagged html angular typescript angular-6

You are not signed in. Login or sign up in order to post.