Editing buttons are cut off in filer field

[krmax44]

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

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

[fsbraun]

@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]

It's plain Django. Seems to be this one:

django-filer/filer/private/sass/components/_drag-and-drop.scss

Lines 244 to 245 in 735f728

	.filerFile {
	position: absolute;

[fsbraun]

@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:

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

[krmax44]

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.

[fsbraun]

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

[gradel]

for my setup (custom feincms3 plugin) this css did the trick:

form .form-row .filer-dropzone span.filerFile.js-file-selector > a:first-child {
    padding-top: 0 !important;
    float: left;
}