mat-expansion-panel - styles get messed up if panel is a child of another element
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### Bug, feature request, or proposal:
The styles of panels will get messed up in the panels are placed in another element (ex: `div`)
Please see pseudo-code example below:
```html
...
...
```
#### What is the expected behavior?
Panels should be styled correctly
#### What is the current behavior?

#### What is the use-case or motivation for changing an existing behavior?
I was trying to implement draggable panels and my implementation has panels inside divs.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 7.0.0-beta.2
#### Is there anything else we should know?
To fix replace [lines 15-29 in expansion-panel.scss](https://github.com/angular/material2/blob/master/src/lib/expansion/expansion-panel.scss#L15-L29):
```scss
.mat-accordion & {
&:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {
border-radius: 0;
}
&:first-of-type {
border-top-right-radius: $border-radius;
border-top-left-radius: $border-radius;
}
&:last-of-type {
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
}
```
... with the following:
```scss
.mat-accordion & {
&:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {
border-radius: 0;
}
}
.mat-accordion > &:first-child,
.mat-accordion > &:first-child:not(.mat-expansion-panel) & {
border-top-right-radius: $border-radius;
border-top-left-radius: $border-radius;
}
.mat-accordion > &:last-child,
.mat-accordion > *:last-child:not(.mat-expansion-panel) & {
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
```
Guía de contribución
Línea de trabajo
Comienza en src/lib/expansion/expansion-panel.scss, en las líneas referenciadas 15-29, y reproduce el marcado anidado de mat-expansion-panel con contenedores div. Compara el reemplazo del selector indicado con los estilos existentes y, después, verifica que el primer y el último panel conserven los radios de borde correctos cuando los paneles están anidados dentro de otros elementos.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Estancado
- Claridad
- Bien especificado
- Aptitud para principiantes
- 48/100