Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

CKEditor 5 in CustomerTicketMessage überlappt Attachments auf mobilen Viewports

Abierto
#52 4 comentarios 0 reacciones 1 asignado Ver en GitHub

@chzauleck ya está trabajando en esto.

Desde el 7/4/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

bug
Environment
  • Server OS Distribution: Ubuntu 22.04 LTS
  • OTOBO installation type: Docker (Compose, Container: otobo-web-1, otobo-daemon-1)
  • Browser: Edge / Chrome aktuelle Version (Windows 11), Safari / Chrome auf iPhone und iPad
  • OTOBO version: 11.0.14 (Image: rotheross/otobo:rel-11_0_14)
Expected behavior

Im Customer-Portal („Neues Ticket“ / CustomerTicketMessage) soll der CKEditor‑5‑Editor auf mobilen Viewports vollständig responsive sein und den nachfolgenden Bereich für Dateiupload/Attachments und den „Übermitteln“-Button nicht überlagern.
Auch beim Schreiben und Scrollen sollte der Editor die darunterliegenden Elemente nicht verdecken.

Actual behavior

Auf schmalen Viewports (Smartphone-Breite im Desktop-Browser sowie iPhone/iPad) überlappt der CKEditor‑5‑Editor beim Schreiben und Scrollen den darunterliegenden Bereich für Dateiupload/Attachments.
Die Toolbar verhält sich sticky, der Editorbereich wächst dynamisch, und der Upload-Block bleibt teilweise hinter dem Editor „versteckt“, bis man wieder nach oben scrollt.

How to reproduce

Steps to reproduce the behavior:

  1. Im Customer-Portal anmelden.
  2. „Neues Ticket“ öffnen (Action=CustomerTicketMessage).
  3. Browserfenster auf Smartphone-Breite verkleinern oder die Seite auf einem iPhone/iPad im Hochformat öffnen.
  4. In das Feld „Text *“ klicken, sodass der CKEditor‑5 aktiv wird, und etwas Text eingeben.
  5. Nach unten scrollen, bis der Bereich „Klicken und Dateien auswählen oder hier ablegen“ und der „Übermitteln“-Button sichtbar sein sollten.
  6. Beobachten, dass der Editor-/Toolbar-Bereich den Dateiupload-Bereich teilweise überdeckt.
Additional information
  • Es handelt sich um die Standard-CustomerTicketMessage-Maske ohne eigene Template-Anpassungen; Änderungen wurden nur über zusätzliches Custom CSS und JavaScript im Customer-Skin vorgenommen.
  • Das Verhalten ist sowohl in der mobilen Ansicht von Desktop-Browsern als auch auf echten iOS-Geräten (iPhone, iPad) identisch.
  • Es wurden bereits Workarounds über Custom CSS (Mindesthöhe und Abstand zwischen Editor und Attachment-Bereich) und zusätzliches JavaScript zur Deaktivierung der StickyToolbar auf kleinen Viewports getestet.
    Diese verbessern das Layout im Ruhezustand, verhindern die Überlappung während des Tippens und Scrollens aber nicht vollständig.
  • Eine Option, die StickyToolbar des CKEditor‑5 im Customer-Frontend auf kleinen Viewports zu deaktivieren oder das Layout entsprechend anzupassen, wäre hilfreich.
Screenshots

Screenshots der Ansicht vor, während und nach der Texteingabe bei Smartphone-Breite sowie des DOM (Editor-Container und Attachment-Container) sind angehängt.

Image
Lenguaje dominante
Perl
Estrellas
0
Forks
6
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

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.

Más de RotherOSS/FAQ

Todos los issues de RotherOSS/FAQ

Issues similares

Más issues de Perl

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.