agusmakmun / agusmakmun/django-markdown-editor

handle overflow gracefully

Abierto
#256 2 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
901
Forks
1.3k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

When I edit a md text that is wider than the editor window, then this text is not shown/cut off in the preview.
Also when I have a md text that is very long than it takes up the whole page.

Current:
![grafik](https://github.com/user-attachments/assets/3e7571e2-3ad5-4f08-a831-6508e63bc0b9)
![grafik](https://github.com/user-attachments/assets/5d783bc6-1192-43a6-8e9a-d645f6c8326b)

I propose to make the following changes to `martor.bootstrap.min.css`:

```
.main-martor {
margin: 1em 0;
position: relative;
overflow: hidden;
width: 100%
}

div.martor-preview {
padding: 1rem;
overflow: scroll;
background: #fdfdfd;
max-height: 50vh
}
```

This does the following:

- `max-height: 50vh` limit the preview height to 50vh (to avoid occupying the whole page - one can still use the full screen mode if needed
- `overflow: scroll` and `overflow: hidden` make the preview scrollable if it is too long
- `width: 100%`: let martor occupy the whole column instead of floating in the middle

Proposed solution:
![grafik](https://github.com/user-attachments/assets/cdbf4812-99ca-4409-8a83-4cf91769b0fc)
![grafik](https://github.com/user-attachments/assets/3b74ad88-7ac1-4226-8be3-8ae6b8aee6bf)

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.