troubleshooting(dialog): Dialog title :before psuedo element
- 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