Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

CKEditor 5 in CustomerTicketMessage überlappt Attachments auf mobilen Viewports

Open
  • Is something wrong?
#52 4 comments 0 reactions 1 assignee View on GitHub

@chzauleck is already working on this.

Since Apr 7, 2026.

Assessment

This issue has not been assessed yet.

Description

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
Dominant language
Perl
Stars
0
Forks
6
No merged PRs in 30d

Getting set up

We have not checked this project's setup files yet. Start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from RotherOSS/FAQ

All issues in RotherOSS/FAQ

Similar issues

More Perl issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.