Insert button in front of a pagination

Asked

Viewed 124 times

0

o layout ficaria com o botão do lado dos numeros da paginaçãoI created a pagination so that the return of my API would be better performing at the moment it is rendered on the screen, the question of adjusting everything ok, however, on this screen I work with TAB, and has a TAB that I put a condition so that appeared a button only in it, at the end, near the layout of pagination. The problem is that I need to put this button next to this pagination (on the same line) and I can’t. I tried to decrease the width, force inline in css but without success. Someone can help me?

Follows the code: 

<div class="row">
  <div class="col-md-12 col-lg-12 ">

    <nb-card [nbSpinner]="pendenciaSintetico.length < 1" nbSpinnerStatus="success">
      <nb-card-header>Pendência de Físico</nb-card-header>
      <nb-card-body>
        <nb-tabset class="size-fonte" fullWidth (changeTab)="findPendencia($event)">
          <nb-tab *ngFor="let p of pendenciaSintetico" [tabTitle]="p.status_time_line" [active]="p.ativo"
            badgeText="{{p.contador_contratos_time_line}}" badgeStatus="success">



            <div class="container">


              <table class="tabela" [nbSpinner]="pendencia.length < 1" nbSpinnerStatus="success" equalColumnsWidth>
                <thead>

                  <tr>
                    <th class="text-left">Proposta</th>
                    <th class="text-left">Cliente</th>
                    <th class="text-left">Agente</th>
                    <th class="text-left">Operação</th>
                    <th class="text-left">Órgão</th>
                    <th class="text-left">Data</th>
                    <th class="text-left">Dias Pendentes</th>
                    <th *ngIf="p.codigo_status_time_line == 0 || p.codigo_status_time_line == 1" class="text-left">Ação
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let i of pendencia | slice: pageSize | slice: 0:itemsPerPage">
                    <td class="size-fonte">{{i.proposta}} </td>
                    <td class="size-fonte">{{i.nome_cliente}}</td>
                    <td class="size-fonte">
                      <span nbTooltip="Nome Digitador">{{i.nome_agente}}</span><br>
                      <span nbTooltip="Nome Fantasia">{{i.nome_loja}}</span><br>
                      <span nbTooltip="Nome Regional">{{i.nome_regional}}</span><br>
                    </td>
                    <td class="size-fonte">
                      <span nbTooltip="Tipo Operação">{{i.tipo_operacao}}</span><br>
                      <span nbTooltip="Produto Corban">{{i.nome_produto_corban}}</span>
                    </td>
                    <td class="size-fonte">
                      <span nbTooltip="Nome Convênio">{{i.nome_convenio}}</span><br>
                      <span nbTooltip="Nome Instituição">{{i.nome_instituicao}}</span>
                    </td>
                    <td class="size-fonte">
                      <span
                        nbTooltip="Data Entrada Operação">{{i.data_entrada_operacao | moment: 'DD/MM/YYYY'}}</span><br>
                      <span nbTooltip="Data Status">{{i.data_status | moment: 'DD/MM/YYYY'}}</span></td>
                    <td class="size-fonte-center">
                      <button nbButton status="info" outline [size]="tiny"
                        nbTooltip="Quantidade de dias pendentes">{{i.dias_pendentes}}</button>
                    </td>
                    <td class="size-fonte">
                      <button *ngIf="p.codigo_status_time_line == 0" nbButton status="success" [size]="medium" outline
                        (click)="enviarPreBordero(i.pk)" nbTooltip="Enviar proposta para Pré Borderô">
                        <i class="fa fa-share color"></i>
                      </button>
                      <button *ngIf="p.codigo_status_time_line == 1" nbButton status="danger" [size]="medium" outline
                        (click)="retirarPreBordero(i.pk)" nbTooltip="Retirar proposta do Pré Borderô">
                        <i class="fa fa-reply color"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <button *ngIf="p.codigo_status_time_line == 1" class="btnGerar" nbButton status="success" size="medium" hero
              (click)="gerarBordero($event)" nbTooltip="Clique para gerar borderô"> Gerar Borderô
            </button>
            <button *ngIf="p.codigo_status_time_line == 1" class="btnGerar" nbButton status="success" size="medium" hero
              (click)="gerarBordero($event)" nbTooltip="Clique para gerar borderô"> Gerar Borderô
            </button>
            <button class="btnGerar" nbButton status="success" size="medium" hero (click)="gerarBordero($event)"
              nbTooltip="Clique para gerar borderô"> Gerar Borderô
            </button>
          </nb-tab>
        </nb-tabset>
        <div *ngFor="let p of pendenciaSintetico">
          <ngb-pagination *ngIf="p.codigo_status_time_line == 1" [collectionSize]="pendencia.length" #numPages
            [maxSize]="15" [pageSize]="itemsPerPage" [(page)]="currentPage" (pageChange)="onPageChange(currentPage)">
          </ngb-pagination>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
</div>
html5 css3 angular

  • Cara has how you edit the question is to include one ready with this on your screen and indicate how you want it to look?

  • I noticed this and put an image to demonstrate. In the case would be on the same line as the numbers of the pagination. But staying on the right side at the end, with the float: right.

  • Man, you are using 2 Css framewroks for Angular together, the Angular Bootstrap and Nebular, that’s right?

  • yes, it has some limitations in the NB, unfortunately I caught the project in progress in this way.

1 answer

1


Dude got some weird stuff in there, you look like you’re wearing Bootstrap, and putting it all in one Card, but I won’t even get into it, because it doesn’t really matter for the end result...

Notice that you must have one div classy row, she’s already a container flex by Bootstrap definition. Then just add in this row the class justify-content-end to align what is inside the right. The button must be outside the pagination component and your result will be as below

inserir a descrição da imagem aqui

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row justify-content-end">
        <nav class="mr-auto" aria-label="Page navigation example">
            <ul class="pagination mb-0">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>
        <button type="button" class="btn btn-primary btn-sm ml-2">Primary</button>
    </div>
</div>

Documentation of Bootstrap paging https://getbootstrap.com/docs/4.0/components/pagination/

  • the elements are "glued", one should be right the other left. I could not remove this...

  • @Wandersonbueno in the pagination Nav put the class mr-auto see in the edition I made in the reply

  • still continues...

  • @Wandersonbueno try to create a test environment only with the pagination compenten and your button and see if it works. If it works properly it’s because there’s something in the rest of your code that’s messing things up. If here in the example works was to work ai tb. Review your HTML structure and the Classes for vc if vc is doing everything right. See that inside the ROW only has 2 direct children, a NAV and a BUTTON...

  • This code will not serve, his is not normal paging, is an Angular component, which most likely by default has a display:block in the element.

  • @Leandrade may be, but when you have two Block elements, inside a Flex container, they are by default next to each other, not under each other. So two Col, inside a ROW the COL will stand next to each other, and not one below the other understands. But really, it may be that his paging component is different, but since he’s using the BS, I picked up the BS pattern

  • 1

    Ahan, certinho @hugocsl , said this more to emphasize even what he is trying to do. It is using this paging component which is from Angular Bootstrap within another css framweork which is Nebular which tbm uses Bootstrap, must be one overlapping the other.

  • 1

    @Leandrade then must be CSS conflict even, it is difficult to simulate his problem in these conditions

  • It didn’t work, it’s lined up but they both stick together.

  • @Wandersonbueno is now lining up one on each side of the screen? Where are they glued together? You can use Bootstrap’s own margin and padding classes to fix this by looking here that will help you a lot https://getbootstrap.com/docs/4.0/utilities/spacing/

  • 1

    Thanks! It worked here, I got for each one on one side! Thanks =)

  • @Wandersonbueno cool that worked out there!! If you think the answer helped you in any way consider marking it as accepted in this icon below the little arrows next to the answer ;)

Show 7 more comments

Browser other questions tagged html5 css3 angular

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