Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

CKEditor 5 in CustomerTicketMessage überlappt Attachments auf mobilen Viewports

Đang mở
#52 4 bình luận 0 reaction 1 người được giao Xem trên GitHub

@chzauleck đang làm issue này rồi.

Từ ngày 7/4/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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
Ngôn ngữ chính
Perl
Star
0
Fork
6
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của RotherOSS/FAQ

Tất cả issue của RotherOSS/FAQ

Issue tương tự

Thêm issue về Perl

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.