es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo personalizar o aplicar otra clase con “.cdk-overlay-pane” para mat-select | mat-dialog en Angular Material.

Cómo personalizar o aplicar otra clase con “.cdk-overlay-pane” para mat-select | mat-dialog en Angular Material.

28 May, 2023 Programación

Estoy usando mat-select para mostrar una lista de opciones. Por lo tanto, cuando hago clic en el campo de entrada mat-select, muestra una lista de opciones utilizando div con la clase cdk-overlay-pane.

Quiero personalizar la clase cdk-overlay-pane. Usando ::ng-deep, lo hice así:

::ng-deep {
.cdk-overlay-pane {
transform: translateX (-40px) translateY (-13px) !importante;
}
}

Y funciona, pero está afectando a otra cdk-overlay-pane.

¿Hay alguna manera de darle a ese div con cdk-overlay-pane customClass?

<

div id="cdk-overlay-1" class="cdk-overlay-pane customClass" style="transform: translateX (-40px) translateY (-51px);">

para que solo este div sea personalizado y no afecte a otros divs.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para asignar una clase personalizada al div con la clase cdk-overlay-pane, puedes utilizar la propiedad de entrada panelClass del elemento mat-select. Aquí tienes un ejemplo:

    <mat-select placeholder="Selecciona una opción" panelclass="customClass">
  <mat-option value="option1">Opción 1</mat-option>
  <mat-option value="option2">Opción 2</mat-option>
  <mat-option value="option3">Opción 3</mat-option>
</mat-select>

    En este ejemplo, la propiedad panelClass se establece en “customClass”, que se aplicará al div más externo del menú desplegable mat-select. Luego puedes usar CSS para dar estilo a este div sin afectar a otros elementos de cdk-overlay-pane en la página.

    .customClass {
  transform: translateX(-40px) translateY(-13px) !important;
}

    Esta regla de CSS solo afectará al menú desplegable del elemento mat-select con la panelClass customClass.

Comments are closed.