Any Idea on how to put Fabrik Action Buttons to Modal Footer seamlessly

[xycofryx]

Fabrik: 3.8.1
Joomla: 3.8.7
Template: Purity III (Fabrik overriden)
Ajax Links: All Enabled

Would it be nice to have those Form/Details Actions to modal footer instead of being included to the <form> tag. I have manage to noob hack it by using JQuery "detach" and "prependTo" it and removing the residual class, but I had to include an "setTimeout" because the noob hack will hinder functionality of the buttons.

/* REASSIGN THE BUTTONS TO FOOTER */
   
    $(".fabrikForm").ajaxSuccess(function(){   
        setTimeout(function() { 
            $(".modal-footer-transfer").detach().prependTo(".bottomBar").removeClass("modal-footer-transfer").removeClass("hide");
        }, 2000);
    });

Is there some way I can seamlessly attach to the modal-footer will preserving the functionality of the buttons? and also preserving it in case I want to switch to non-modal. Is there such a way?

 

[Bauer]

Why do you want/need a modal container?

If you are just concerned about always keeping the action buttons in the viewport as you scroll through the form, why not just use css and assign 'sticky' to the position for the actions div?

.fabrikActions {
    position: -webkit-sticky;/* Safari */
    position: sticky;
    bottom: 0;
    z-index: 999;
}

 

[xycofryx]

I haven't thought about it. It seems a nice fix. I'll give it a try and update you as soon as possible. Thanks you for the spoon feed.

 

[xycofryx]

It does not work as expected in modal it only works on non-modal forms.

 

[Bauer]

It does not work as expected in modal it only works on non-modal forms.

Sorry I misunderstood. I thought you wanted only the action buttons to be in a modal (that's why I questioned why you needed a modal).

Use absolute position instead. Something like...

form[name='form_1'] .fabrikActions {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 999;
}

Depending on your template, you may also want to remove some of the padding from the actions div - and may need to assign the 'relative' position to the form itself.

 

[xycofryx]

Sorry for the misunderstanding . Yeah I needed the buttons to be placed on the modal footer if I have to choose "AJAX Links" and also adaptively work on non-modal forms if choose not to go with the "AJAX Links".