Duvida layout primeNG

Front-end
#1

estou tentando alterar o layout de uma pagina, eu preciso que os dois cards estejam lado a lado e fiquem na mesma linha ocupando o mesmo tamanho, nao estou sabendo fazer esse alinhamento, alguem pode me ajudar;

Screenshot_1
Screenshot_1.jpg1348×605 77.6 KB

o card da direita deve acompanhar o tamanho do outro, os dois devem sempre ter o mesmo tamanho

<div class="p-grid">

  <div class="p-col-8">

    <p-card style="height: 300px;">

      <span class="t-dados-doc">{{pad.docente.dsNome}}</span><small> -

        {{pad.docente.cdMatricula}} -

        {{pad.docente.funcaoAtual.fnDescfun}}</small>

      <button [disabled]="downloadPDFProgress" (click)="downloadPDF()"

        class="float-right btn btn-sm btn-outline-success" title="Clique para gerar o PDF do PAD">

        <small *ngIf="!downloadPDFProgress">

          <i class="pi pi-print"></i> GERAR PDF

        </small>

        <small *ngIf="downloadPDFProgress">

          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

          GERANDO PDF...

        </small>

      </button>

      <small class="alert-form erro-download float-right" *ngIf="downloadPDFError">

        Erro ao gerar o PDF. Tente novamente.

      </small>

      <div class="table-responsive">

        <table class="table table-sm mt-3">

          <thead>

            <tr>

              <th scope="col">SITUAÇÃO FUNCIONAL</th>

              <th scope="col">REGIME</th>

              <th scope="col">TITULAÇÃO</th>

              <th scope="col">CURSO/COLEGIADO</th>

              <th scope="col">CENTRO/FACULDADE</th>

            </tr>

          </thead>

          <tbody>

            <tr>

              <td>{{pad.docente.situacao}}</td>

              <td>{{pad.docente.regime}}</td>

              <td>{{pad.docente.instrucao.dsInstrucao | uppercase}}</td>

              <td>{{pad.docente.curso.descricao | uppercase}}</td>

              <td *ngIf="pad.docente.curso.centro">{{pad.docente.curso.centro.descricao}}</td>

              <td></td>

            </tr>

          </tbody>

        </table>

      </div>

    </p-card>

  </div>

  <div class="p-col-4">

    <!-- inicio do grafico -->

    <p-card>

      <p-chart type="radar" [data]="data" *ngIf="graficoCarregado"></p-chart>

      <span *ngIf="!graficoCarregado && !erroCarregarGrafico" class="center-text">

        <p-progressBar mode="indeterminate" [style]="{height: '10px'}"></p-progressBar>

        <small>Carregando gráfico...</small>

      </span>

      <div *ngIf="erroCarregarGrafico">

        <small>Não foi possível carregar o gráfico</small>

      </div>

      <p-footer>

        <p *ngIf="graficoCarregado">

          Total de horas por grupo de atividade

        </p>

      </p-footer>

    </p-card>

  </div><!-- fim do grafico -->

</div>
#2

Tente setar o min-height do card da esquerda com o mesmo valor do height do card da direita.

#3

@Lucas_Camara, ele nao reconhece nenhum comando css que eu faço

#4

a minha ideia é que o card da direita ficasse do tamanho do card da esquerda, mas ele sempre acompanha o tamanho do conteúdo, por isso fica menor, queria que esse tamanho fosse dinamicamente igual ao card da direita, onde fica o gráfico

#5

Tava lendo na docs do primeNG e tem uma página que explica como e quando sobrescrever o estilo dos componentes:

https://www.primefaces.org/primeng/showcase/#/card (Veja a sessão styling)

https://www.primefaces.org/primeng/showcase/#/theming

#6

obrigado pela dica! funcionou!