Changement du style de la superposition de conteneur

- Je utiliser un projet git pour un clavier virtuel (https://ngx-material-keyboard.github.io/demo/). Et j'ai quelques questions pour essayer de le faire fonctionner sur un petit appareil avec 450*250 pixels.

À la fin, j'ai trouvé les changements nécessaires dans le css si je modifie directement dans le navigateur web avec les outils de dev.

Maintenant, je dois trouver la bonne position pour modifier le sources.

Il sera utilisé de la superposition de la composante de angular2-matériel de visualiser le clavier.

Si je commente la position dans le cdk-overlay-conteneur, il travaille:

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

Mais je ne peux pas remplacer ces de mon angulaire de l'application.
Des suggestions?

Capture d'écran de changements

OriginalL'auteur user1025633 | 2017-08-10

  1. 12

    MISE À JOUR DE RÉPONSE

    À partir de la documentation officielle:

    Style de superposition des composants

    Superposition à base de composants ont une panelClass
    propriété (ou similaires) qui peut être utilisé pour cibler la superposition volet.

    Vous pouvez remplacer la boîte de dialogue par défaut contenant les styles par l'ajout d'une classe css dans votre global styles.css. Par exemple: 

    .custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

    Après cela, vous aurez besoin de providies vous classe css comme un panelClass paramètre à votre boîte de dialogue:

    this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

    Lire ce documentation officielle pour plus d'informations.

    RÉPONSE ORIGINALE À CETTE QUESTION

    Utilisation ::ng-deep dans votre composant.les css remplacent les styles par défaut. 

    ::ng-deep .cdk-overlay-container {
    /* Do you changes here */
    position: fixed; 
    z-index: 1000;
}
    Nice. Il fonctionne comme prévu..
    Cool merci (y)
    Il est intéressant de noter que ::ng-deep est obsolète - mais je ne peux pas trouver des précisions sur les délais ou les solutions de rechange
    ::ng-profonde de ne pas rester isolé dans le champ d'application, il aura un effet sur d'autres points de vue trop

    OriginalL'auteur Faisal

  2. 1

    Pour être en mesure de remplacer le Matériel des classes CSS de votre composant les styles, vous devez définir le Vue D'Encapsulation à l'absence sur votre composant:

    @Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})

    OriginalL'auteur Andrei Matracaru

  3. 0

    J'ai trouvé que par l'aide de la main/par défaut "les Styles.css" des changements au style de la CDK (ainsi que du Matériel et des Animations) sont pris correctement. (mise en garde), je suis en utilisant Angulaire 4.

    OriginalL'auteur B Stensrud