CKEditor 5 in CustomerTicketMessage überlappt Attachments auf mobilen Viewports
@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ả
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:
- Im Customer-Portal anmelden.
- „Neues Ticket“ öffnen (Action=CustomerTicketMessage).
- Browserfenster auf Smartphone-Breite verkleinern oder die Seite auf einem iPhone/iPad im Hochformat öffnen.
- In das Feld „Text *“ klicken, sodass der CKEditor‑5 aktiv wird, und etwas Text eingeben.
- Nach unten scrollen, bis der Bereich „Klicken und Dateien auswählen oder hier ablegen“ und der „Übermitteln“-Button sichtbar sein sollten.
- 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.
- 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
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của RotherOSS/FAQ
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 52/100
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 68/100
-
tidy code
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 25/100
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 45/100
-
bug good first issue
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 45/100
Tất cả issue của RotherOSS/FAQ
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
-
documentation Needs Triage
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
trizen/youtube-viewer#456 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 70/100
-
connectivity Đang mở
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 80/100