Scroll moves to the top on redraw of form builder in form.io library

Discussão em 'Angular' iniciado por 2017kamb, Abril 21, 2025.

  1. 2017kamb

    2017kamb Guest

    Form.io Angular1.x library

    I am using the library with Angular (1.x). I have some special situations where I will require your guidelines.

    Case 1 I need to attached the element_id property in the component JSON before it gets render in the form. This element_id I get after I do the API call.

    Currently, we are getting the addComponent event after the component gets add to the form due which I need to redraw the builder form in order to update the json of the form builder. I need to avoid this reload because due to this reload the scroll of the screen goes to the top.

    Case 2 I have couple of component like Panel and Data Grid that I add to form without drag and drop. This components are added when user clicks on the button but in order to load them to the form I need to re-initialise the form again due to which the scroll of the screen goes to top which is not the good user friendly behaviour.

    Case 3 For component sequence we are managing the order_no property so when user change the element position using drag and drop then we are calling the API with updated order_no but in order to update the same in form builder json we need to re-initialise the form builder and that move the scrolls to the top of the screen.

    case 4 We have skipped the confirm box of form io open for the remove component and loads our modal with message. The problem is we can only load the model after the removeComponent event is triggered and till this moment the element is removed from the form builder json. We need to configure in such a way that the component should not be removed from the json until user gives the confirmation to the model.

    Also when we re-initialise the form builder the side panel of component list is also re-initialise the scroll position as well as the search text are reset.

    Looking forward to hear form you for the solution.

    Continue reading...

Compartilhe esta Página