Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

251
Vistas
mat-select no funcionaba bien en Angular

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

aplicación.componente.html:

 <div class="col-12 p-0"> <mat-paginator class="paginator col-12" (page)="pageEvent = getServerData($event)" [length]="totalRecords" [pageSize]="search.size" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons> </mat-paginator> </div>

aplicación.componente.ts:

 ::ng-deep .mat-select-panel-wrap { flex-basis: 100%; padding-bottom: 40px !important; padding-left: 12px !important; }

cuando estoy seleccionando 10,20,50, la selección de alfombras funcionaba bien e incluso después de seleccionar 100, muestra 100 filas. Pero cuando el valor seleccionado estaba en 100 y trato de seleccionar, la selección de alfombras iba arriba como se muestra en el imagen.

https://stackblitz.com/edit/angular-mat-paginator-jhx2jf?file=app/table-pagination-example.ts

Gracias.

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Encontré tu problema. El problema es que cdk-overlay-pane está aplicando su propio CSS, por lo que debe agregar CSS para eso.

Agregue código de estilo en Style.css :

 .cdk-overlay-pane{ min-width: 56px; pointer-events: auto; font-size: 12px; bottom: 20.6875px; left: 133.391px; transform: translateX(0px) translateY(0px) !important; // set 0px for X and Y }
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda