0

o layout ficaria com o botão do lado dos numeros da paginaçãoCriei uma paginação pra que o retorno de minha API ficasse com melhor desempenho no momento que é renderizado na tela, a questão de ajuste tudo ok, porém, nessa tela eu trabalho com TAB, e tem uma TAB que coloquei uma condição para que aparecesse um botão somente nela, ao fim, perto do layout de paginação. O problema é que eu preciso por esse botão ao lado dessa paginação (na mesma linha) e não consigo. Tentei diminuir o width, forçar o inline no css mas sem sucesso. Alguém pode me auxiliar?

Segue o código:

<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>
4
  • Cara tem como vc editar a pergunta é incluir um pronta de com esta na sua tela e indicar como quer que fique?
    – hugocsl
    Commented 20/09/2019 às 16:56
  • Percebi isso e coloquei uma imagem pra demonstrar. No caso ficaria na mesma linha que os números da paginação. Mas se mantendo pelo lado direito no final, com o float: right. Commented 20/09/2019 às 16:58
  • Man, vc está utlizando 2 framewroks Css pra Angular juntos, o Angular Bootstrap e Nebular, é isso mesmo?
    – LeAndrade
    Commented 20/09/2019 às 17:24
  • sim, tem umas limitações no NB, infelizmente peguei o projeto em andamento dessa forma. Commented 20/09/2019 às 17:43

1 Resposta 1

1

Cara tem umas coisas estranhas ai, vc parece que está usando Bootstrap, e colocando tudo dentro de um Card, mas nem vou entrar nesse assunto, pq não importa muito pro resultado final...

Repare que vc deve ter uma div com classe row, ela já é um container flex por definição do Bootstrap. Então basta adicionar nessa row a classe justify-content-end para alinha o que estiver dentro a direita. O button deve estar fora do componente de paginação e seu resultado será como abaixo

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>

Documentação da paginação do Bootstrap https://getbootstrap.com/docs/4.0/components/pagination/

12
  • os elementos estão "colados", um deveria ficar a direita o outro a esquerda. Não consegui retirar isso... Commented 20/09/2019 às 17:34
  • @WandersonBueno na nav de paginação coloque a classe mr-auto veja na edição que fiz na resposta
    – hugocsl
    Commented 20/09/2019 às 17:44
  • 1
    Ahan, certinho @hugocsl , disse isso mais pra ressaltar mesmo o que ele está tentando fazer. Ele está utilizando este componente de paginação que é do Angular Bootstrap dentro de outro framweork css que é o Nebular que tbm utiliza Bootstrap, deve estar um se sobrepondo o outro.
    – LeAndrade
    Commented 20/09/2019 às 18:40
  • 1
    @LeAndrade então deve ser conflito de CSS mesmo, fica complicado simular o problema dele nessas condições
    – hugocsl
    Commented 20/09/2019 às 18:47
  • 1
    Valeu! Deu certo aqui, consegui por cada qual em um lado! Obrigado =) Commented 24/09/2019 às 13:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .