Issues with Javascript "setHeight" function in PW admin

[Robin S]

The "setHeight" function sets the height of a filler div to equalise the height of inputfield columns in the admin, so everything looks neat and tidy. I like this and the overall attention to detail in the admin UI, but I've notices a couple of issues with this method of equalising columns.

1. The function fires on document ready but this doesn't allow time for CKEditor fields to load and these can change the height of a column by quite a bit when loaded. Perhaps setHeight should fire on window load instead of document ready? (Edit: I tried this and it doesn't solve the issue. Probably needs to fire on a callback from CKEditor). Or perhaps a CSS-only solution could replace this Javascript approach, utilising display:table-cell or flexbox?

2. The function fires even when the viewport is narrow enough that the layout has switched to single column. In this case the heights don't need to be equalised because the columns are stacked on top of each other, and the extra filler space looks weird. This issue affects the Form Builder module too, where the filler div can cause the form to expand beyond the height of its iframe.

I cludged together a CSS fix for this like so...

@media only screen and (max-width:767px) {
    .maxColHeightSpacer {display:none !important;}
}

...but it might be better to use something like enquire.js to make sure the function only fires above a certain breakpoint.

Edit: just discovered another small issue...

3. The function doesn't fire after images and files are added to a field, which of course changes the height of the field. Is there an AJAX callback for image/file uploads I can use to retrigger the function?

Any thoughts?

Edited September 2, 2015 by Cerulean

[Robin S]

This solved issue one for me:

CKEDITOR.on("instanceReady", function(event){
    InputfieldColumnWidths();
});