Footer not moving on field resize

RagnarGrootKoerkamp

We currently have a selectize field in the editor popup, which options are shown inline. When the field get focus, these options are shown and the popup resizes to the maximal height of the browser window, but the footer keeps the same position relative to the header.

• before options show
• after options show

Also, some problems remain when adding/removing fields. I am quite sure things only break when the scrollbar gets involved, because when I do the same test as above with a slightly higher window everything seems to be fine.

Would there be an easy fix for this?

allan

It looks like the dropdown doesn't have position absolute on it, which is enabled in the default Selectize CSS. Are you using any modifications or overrides for that CSS?

Allan

RagnarGrootKoerkamp

Yes, I changed the position of the dropdown element to static, because otherwise the dropdown would not be visible outside of the editor popup: image. (This behaviour is weird when the selectize button is at the bottom of the screen.)

A way to fix that would be using the dropdownParent: 'main' option, but then it wouldn't work well with scrolling inside the editor popup.

allan

What version of Selectize are you using? I don't seem to have that problem with 0.12.1.

Allan

RagnarGrootKoerkamp

I'm using Selectize 0.12.1 as well, but I am using my own custom field that implements the selectize button.

There's two issues here:
- When using display:static on the dropdown, the editor popup footer not moving when the inline selectize dropdown appears, which happens for some other field add/remove actions as well.
- This only fails on Chromium Version 55.0.2883.87 I'm using. Firefox 50.1.0 seems to be much more stable regarding this (haven't been able to get a wrong footer placement yet on Firefox).
- When not using display:static, the selectize dropdown doesn't 'escape' the editor popup body, but instead stays inside and makes the body into a scrollable area.
- This fails on both Chromium and Firefox.
- When I remove the 'overflow:auto' attribute from the editor popup body, the dropdown does extend below the body, but then (obviously) the fields in the body itself also continue below the footer.

I might be able to extract an MWE from my website, but that'd probably take some time. Otherwise I could send you some login credentials, but I'm not sure how useful that would be.

allan

I would recommend not using display: static. I think that will lead into a whole lot of problems, the least of which Editor doesn't present a public API to resize the form (although you could simply try $(window).resize();.

When not using display:static, the selectize dropdown doesn't 'escape' the editor popup body

You need to use the dropdownParent: 'body' option for Selectize.

Allan

RagnarGrootKoerkamp

Thanks for the hint. I think we dropped the dropdownParent: 'body' solution a long time ago because it did not (and still does not) work well with scrolling of the form, but it's much better then the current behavior.

Another problem (both for selectize and datepicker fields) is that they show the dropdown as soon as they are focused. Sometimes the form is still animating added/removed fields at that time. Then, the popup might end up in the wrong place (at the position at the moment of focussing, not the final position.)

Question: Is there a way to focus a field after all animations are done? Maybe using some callback form editor?

allan

You could try calling the field().focus() method for the field in question once the animation is complete. However, that is something that it would be good to have Editor do automatically and I will look into adding that. Thanks for noting this.

Allan

RagnarGrootKoerkamp

That would be great!

Turns out the non-scrolling behaviour of the dropdown can easily be fixed by calling the positionDropdown method ourselves (in the create method of the custom field)

            $(this.dom.bodyContent).on('scroll', function(){
                conf._selectize.positionDropdown();
            });