plotly / plotly/plotly.js

`responsive` doesn't work if a parent has padding and `min-width: min-content`

Abierto
#7,491 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug P2
Lenguaje dominante
JavaScript
Estrellas
18.3k
Forks
2k
Merge medio
2 d 12 h
PR fusionados (30 d)
28

Descripción

steps to reproduce:

  1. open this fiddle https://jsfiddle.net/rhdq9ynu/5/
  2. use ctrl+mousewheel to zoom out to 30%
  3. use ctrl+mousewheel to zoom back in to 100%
  4. notice that the plot now overflows its parent and the home icon in the top is no longer visible.

before

Image

after

Image

The key is this CSS:

#app {
  padding: 0px 100px;

  & > * {
    min-width: min-content;
  }
}

If you remove either the padding or the min-width everything works fine.

Both min-content and fit-content are buggy.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el JSFiddle enlazado y reproduce la secuencia de zoom con el padding y el CSS de min-width mostrados. No se nombra ningún archivo del repositorio ni ninguna prueba; se considera terminado cuando el gráfico permanece dentro de su elemento padre y el icono de inicio sigue visible después de volver a aplicar el zoom al 100 %, también con min-content y fit-content.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
css, javascript
Área
data-visualization, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.