django-cms / django-filer

File and Image Management Application for django
https://django-filer.readthedocs.io/
Other
1.75k stars 577 forks source link

Editing buttons are cut off in filer field #1499

Open krmax44 opened 5 days ago

krmax44 commented 5 days ago

The Filer File Fields are cut off in CMS editing modals. This seems to be due to absolute positioning of the elements.

image

When disabling position: absolute in the dev tools, it looks like this:

image

fsbraun commented 5 days ago

@krmax44 Thanks for reporting this. What styling are you using for the admin, e.g. plain Django, djangocms-admin-style, or anything else?

Which css file does the position: absolute belong to?

krmax44 commented 2 days ago

It's plain Django. Seems to be this one: https://github.com/django-cms/django-filer/blob/735f7280aed82d5e2522e4bef5212280ff144548/filer/private/sass/components/_drag-and-drop.scss#L244-L245

fsbraun commented 2 days ago

@krmax44 I think the actual solution will lie elsewhere. Removing the position will enlargen the widget. It should fit into the space, however.

The result should probably look like this:

image

Also the relatively new "View" icon (eye) should be properly formatted.

krmax44 commented 2 days ago

Yes, the elements should be besides each other. I think this should be a flexbox layout, not absolutely positioned. Simply adding display: flex to .filerFile goes a long way already. image

fsbraun commented 2 days ago

Yes, that might be an interesting direction to pursue. I think flexbox did not exist when the original css was created...