How to scroll to edit panels when opening them?

[giannicolac]

Description:

Hello. I have a question. Is it possible to make the window scroll to the editPanel when it is opened. I know of the onOpenFieldEdit, and have tried using it for this, trying the following with no luck:

onOpenFieldEdit: function(editPanel) { editPanel.scrollIntoView }, This code does nothing at all. And i presume it could be because of the time it takes for the editPanel to open? I have no idea.

Environment Details:

• formBuilder Version: 3.19.7
• Browser: Firefox
• OS: Linux Mint

Expected Behavior

I would expect the scrollIntoView method to make the editPanel be in view.

Actual Behavior

Nothing

Steps to Reproduce

onOpenFieldEdit: function(editPanel) { editPanel.scrollIntoView },

[lucasnetau]

editPanel.scrollIntoView is a function and you code is missing the (). If I add this to my config it is working as expected.

onOpenFieldEdit: function(editPanel) { editPanel.scrollIntoView() },

[giannicolac]

Tried that. With that code, in my case it sometimes scrolls a little tiny bit, but im not getting a proper scroll here.

[lucasnetau]

Likely because the browser already considers the element to be in view. Take a look at some of the options you can add to that call https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

You may find wraping the call in a short timeout may help if the issue is the field has not completely expanded by the time the scroll is requested,

[giannicolac]

Setting a timeout does work, yet it has to be a timeout of around 250 ms to actually show the whole panel, which i think is too much. Is there a way to make the field expansion occur faster?

[lucasnetau]

The field slide is done here $editPanel.slideToggle(250) in openField() in helpers.js

It might make sense to move emitting of the events to the slideToggle complete handler. In addition to the onOpenFieldEdit we also have $(document).trigger('fieldOpened', [{ rowWrapperID: rowWrapper.attr('id') }]) at the same point