0

Estoy usando primeng como framework y primeflex para Angular, construí un grid para un pequeño formulario usando una card como contenedor, pero estoy teniendo unos espacios largos y no se como quitarlos y que se ajuste la card al contenido, trate de quitar márgenes o padding pero no he tenido éxito no se si hace falta añadir algún tipo de fila, para esto use columnas con la clase col. Les adjunto una imagen del problema donde se ven los espacios en morado y del HTML, clases en CSS no he modificado para este fin.

<div class="grid">
  <div class="col-9 col-offset-1">
    <p-card>
      <ng-template pTemplate="header">
        xxxxxxxxx
        <div class="separator"></div>
      </ng-template>
      <form [formGroup]="formAuction">
        <div class="grid">
          <div class="col-10  mr-0 pt-0">
        <h5>
          <strong>¿xxxxxx?</strong>
        </h5>
       </div>
          <div class="col-3 mt-0">
            <p-calendar
              [(ngModel)]="date"
              formControlName="yearAndMonth"
              view="month"
              dateFormat="yy-mm"
              [readonlyInput]="true"
              inputId="monthpicker"
              placeholder="Seleccione un mes y año"
              class="mr-4"
              [style]="{ width: '100%', height: '100%' }"
            ></p-calendar>
          </div>
        <div class="col-8 md:col-6 lg:col-10 mt-0 pt-0">
        <h5><strong>¿xxxxxxxxxxxx?</strong></h5>
        </div>
          <div class="col-3">
            <div class="flex-row">
            <p-multiSelect
              [options]="seller"
              [(ngModel)]="selectedSeller"
              formControlName="sellerAgentCodes"
              defaultLabel="xxxx"
              optionLabel="seller"
              selectedItemsLabel="{0} filtros seleccionados"
              class="mr-4"
              [style]="{ width: '100%', height: '100%' }"
            ></p-multiSelect>
            </div>
          </div>
          <div class="col-3 row">
            <div class="row">
            <p-multiSelect
              [options]="buyer"
              [(ngModel)]="selectedBuyer"
              formControlName="buyerAgentCodes"
              defaultLabel="xxxxx"
              optionLabel="buyer"
              selectedItemsLabel="{0} filtros seleccionados"
              class="mr-4"
              [style]="{ width: '100%', height: '100%' }"
            ></p-multiSelect>
          </div>
          </div>
          <div class="col-2 row">
            <input
              formControlName="contractIdsOrCodes"
              type="text"
              pInputText
              placeholder="xxx"
              class="mr-4"
              [style]="{ width: '100%' }"
            />
          </div>
      
        <div class="col-8 mt-2 flex justify-content-end">
          <p-button
            label="xxxx"
            icon="pi pi-refresh"
            [loading]="loading[0]"
            class="mr-2"
          ></p-button>
          <p-button
            label="Consultar"
            [loading]="loading[0]"
            (onClick)="getContracts()"
          ></p-button>
        </div>
        </div>
      </form>
    </p-card>

introducir la descripción de la imagen aquí

1 respuesta 1

1

Esos espacios en morado que comentas tienen que ver con las clases que has puesto col-. Mira en la documentación de Bootstrap lo relacionado con Grid que te ayudará a entender mejor cómo mostrar los elementos con el tamaño que quieres.

Para mostrar qué está pasando copio tu código, añado la librería de Bootstrap (he puesto la versión 4, no sé cuál estarás usando tú) y pongo algún color de fondo para verlo mejor. Hay elementos que no se están mostrando (por ejemplo el calendario) porque las librerías no están puestas:

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

<div class="grid">
  <div class="col-9 col-offset-1 bg-light">
    <p-card>
      <ng-template pTemplate="header">
        xxxxxxxxx
        <div class="separator"></div>
      </ng-template>
      <form [formGroup]="formAuction">
        <div class="grid">
          <div class="col-10  mr-0 pt-0 bg-success">
        <h5>
          <strong>¿xxxxxx?</strong>
        </h5>
       </div>
          <div class="col-3 mt-0">
            <p-calendar
              [(ngModel)]="date"
              formControlName="yearAndMonth"
              view="month"
              dateFormat="yy-mm"
              [readonlyInput]="true"
              inputId="monthpicker"
              placeholder="Seleccione un mes y año"
              class="mr-4"
              [style]="{ width: '100%', height: '100%' }"
            ></p-calendar>
          </div>
        <div class="col-8 md:col-6 lg:col-10 mt-0 pt-0">
        <h5><strong>¿xxxxxxxxxxxx?</strong></h5>
        </div>
          <div class="col-3">
            <div class="flex-row">
            <p-multiSelect
              [options]="seller"
              [(ngModel)]="selectedSeller"
              formControlName="sellerAgentCodes"
              defaultLabel="xxxx"
              optionLabel="seller"
              selectedItemsLabel="{0} filtros seleccionados"
              class="mr-4"
              [style]="{ width: '100%', height: '100%' }"
            ></p-multiSelect>
            </div>
          </div>
          <div class="col-3 row">
            <div class="row">
            <p-multiSelect
              [options]="buyer"
              [(ngModel)]="selectedBuyer"
              formControlName="buyerAgentCodes"
              defaultLabel="xxxxx"
              optionLabel="buyer"
              selectedItemsLabel="{0} filtros seleccionados"
              class="mr-4"
              [style]="{ width: '100%', height: '100%' }"
            ></p-multiSelect>
          </div>
          </div>
          <div class="col-2 row">
            <input
              formControlName="contractIdsOrCodes"
              type="text"
              pInputText
              placeholder="xxx"
              class="mr-4"
              [style]="{ width: '100%' }"
            />
          </div>
      
        <div class="col-8 mt-2 flex justify-content-end">
          <p-button
            label="xxxx"
            icon="pi pi-refresh"
            [loading]="loading[0]"
            class="mr-2"
          ></p-button>
          <p-button
            label="Consultar"
            [loading]="loading[0]"
            (onClick)="getContracts()"
          ></p-button>
        </div>
        </div>
      </form>
    </p-card>

Si te fijas, ya desde el comienzo tienes un espacio de pantalla "perdido". Esto ocurre porque en esta parte:

<div class="grid">
  <div class="col-9 col-offset-1">
    <p-card>

En la línea de enmedio le estás diciendo que ocupe 9 columnas de las 12 en las que se divide la pantalla.

Como segundo ejemplo (el resto se explican de manera similar), lo que ves con fondo verde, es esta parte:

<form [formGroup]="formAuction">
  <div class="grid">
    <div class="col-10  mr-0 pt-0">

Que le estás diciendo que ocupe 10 columnas de 12 del espacio que puede ocupar (que en el elemento padre le habías dicho que ocupara 9 de 12), con lo que está ocupando un 62,5% de tu pantalla.

Para solucionar esto, puedes poner donde quieras que te ocupe todo el espacio un col-12, y en las filas que quieras poner varios elementos los col-xde tal manera que entre todos sumen 12.

El ejemplo para el comienzo sería poner:

<div class="grid">
  <div class="">
    <p-card>

Con esto ya consigues que ocupe todo el espacio.

Para el segundo ejemplo:

<form [formGroup]="formAuction">
  <div class="grid">
    <div class="col-12">

De cualquier manera, quizás sea más fácil empezar el código de nuevo aplicando estos estilos de grid poco a poco.

Espero te sirva de ayuda

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.