angular / angular/components

troubleshooting(dialog): Dialog title :before psuedo element

Ouverte
#28,129 3 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
area: material/dialog P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

We are doing a migration to Material Angular 16 and when attempting to style the `mat-dialog-title` of a dialog. There is a `:before` pseudo element which has an empty string as content, and I believe the purpose of this element is to set the height of the title element with the `mat-dialog-title` directive. Is this correct? This implementation seems very hacky to me and flexbox `justify-content` does not work property because this pseudo element is considered an element within a flex container, and therefore the developer either needs to create a new flex container within the `mat-dialog-title` or remove the content from the `:before` psuedo element. Am I not not thinking of this correctly and is there another way to use `justify-content` which works with this psuedo element?

### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

If the `mat-dialog-title` container is a flex container, `justify-content: space-between` works correctly.

### Actual Behavior

`justify-content: space-between` adds space between the psuedo element which has an empty string as content and the next element within the `mat-dialog-title`

### Environment

- Angular: 16.2.10
- CDK/Material: 16.2.9
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par les styles du titre de la boîte de dialogue Angular Material associés à la directive mat-dialog-title et reproduisez la mise en page dans Firefox en utilisant l’exemple de flexbox de l’issue. Vérifiez comment le pseudo-élément :before affecte justify-content: space-between. Le travail est terminé lorsque la mise en page flex du titre de la boîte de dialogue se comporte comme prévu sans nécessiter de conteneur supplémentaire ni la suppression manuelle du pseudo-élément.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.