Support » Plugin: Forminator - Contact Form, Payment Form & Custom Form Builder » Pagination – White Space Below Footer(Fix Included)

  • Resolved dibsh

    (@dibsh)


    There is an issue when you create multi-step forms, or in Forminator speak – add a Pagination field to a form. Without Pagination, i.e. a single page form, the footer of a theme stays where it should.

    With Pagination – with every Pagination field added the theme’s footer moves upwards, leaving more and more white space below it.

    There is a ticket on your support forum that shows the same issues –

    https://premium.wpmudev.org/forums/topic/forminator-pro-white-space-below-footer-when-using-forminator-pro/

    Although the OP doesn’t get as far as explaining what specifically caused his issue. On a site I experienced it with – WP is current as of today & so is the Forminator plugin. I was able to reproduce it many times – as soon as a a Pagination field was added the footer moved upwards, with white space behind it. Additional Pagination fields pushed it further.

    I’ve address it by the following changes to the \wp-content\plugins\forminator\build\front\front.multi.min.js file –

    go_to: function(t, e) {
    if (this.step = t, t === this.totalSteps) return !1;
    this.$el.find(“.forminator-pagination”).css({
    //height: “0”,
    height: “auto”,
    opacity: “0”,
    //visibility: “hidden”
    display: “none”
    }).attr(“aria-hidden”, “true”), this.$el.find(“[data-step=” + t + “]”).css({
    height: “auto”,
    opacity: “1”,
    //visibility: “visible”
    display: “block”
    }).removeAttr(“aria-hidden”);

    I’ve left the original lines commented out. I’ve test the fix on Edge, Chrome & FF and I no longer have any issues with the white space. Basically it’s the difference between display: none & visibility: hidden – in the former case the element takes up no space and in the latter it still does.

    Hope it helps someone and perhaps it can be incorporated into the plugin.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @dibsh

    I hope you’re well today!

    Thank you for reporting this and for suggested solution.

    I think I got some good news for you though ๐Ÿ™‚ The ticket that you linked to – the issue was already passed over to our developers as a bug back then and there’s a fix on its way. It’s already prepared and pushed to the plugin, just waiting to be fully tested before release.

    I don’t have an ETA but it should be included with one of nearest upcoming releases to solve the issue permanently ๐Ÿ™‚

    Best regards,
    Adam

    Looking forward this fix, too!

    diyboss

    (@diyboss)

    I am looking forward to this fix as well! this is one of the only things I do not like about forminator

    Plugin Support Kasia – WPMU DEV Support

    (@wpmudev-support2)

    Hello,

    Small update, fix for this will be included in Forminator 1.13 – right now it is in the QA and it will be released after passing tests (it’s almost ready to go :)).

    kind regards,
    Kasia

    Hi WPMU DEV,

    Just wanted to inform you that I also have this issue. When using page-breaks to enable pagination, there is a large amount of white space added below the footer which I cannot seem to override with CSS.

    I attempted the fix dibsh explained in his reply, however that made the entire form become hidden, and I had to undo it.

    I hope the fix is coming soon!

    Thanks

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @jacobp709

    I hope you’re well today!

    Yes, the fix is on it’s way. I don’t have an exact ETA but it’s “just around the corner” and should be released quite soon.

    Best regards,
    Adam

    Plugin Support Jonathan – WPMU DEV Support

    (@wpmudev-support9)

    Hello @dibsh

    I hope you are doing well!

    We haven’t heard back from you for a while now so we’ve marked this ticket as resolved.

    The issue will be fixed in the next plugin’s release.

    If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

    Kind regards,
    Nastia

    phalancs

    (@phalancs)

    It’s been half a year since it has been reported and still no fix until today. I am a little disappointed somehow ๐Ÿ™ Thanks for providing a workaround @dibsh, I’m gonna test it immediately.

    EDIT: Thanks it worked, had to change the quotes but then all works as expected.

    • This reply was modified 3 months ago by phalancs.
    dibsh

    (@dibsh)

    I just realised during my original post the cut & paste – the double quotes went weird. For anyone wanting a workaround – open up the file

    \wp-content\plugins\forminator\build\front\front.multi.min.js

    in your public_html folder in a text editor – I use Notepad++ – and find line 3462 (or thereabouts) it will start as follows;

    go_to: function(t, e) {

    What follows is basically is 2 conditional blocks of code.

    In the 1st block find

    visibility: "hidden"

    and comment it out & add a new line so it looks like:

                    //visibility: "hidden"
    		display: "none"

    Then about 4-5 lines down in the 2nd block find

    visibility: "visible"

    comment it out and add a new line below so it looks like

                    //visibility: "visible"
    		display: "block"

    I’d suggest create your form first – confirm that additional page breaks are adding white space below your form and then do the above workaround\fix.

    I’m not sure what it would do to a form that has no page breaks – but if you don’t have any page breaks – then you shouldn’t really have any need for the above.

    HIH

    Dibs

    • This reply was modified 3 months ago by dibsh.
    dibsh

    (@dibsh)

    Or for those a bit wary – open the file mentioned in the above post – find line 3462 and find the following block of code:

            go_to: function(t, e) {
                if (this.step = t, t === this.totalSteps) return !1;
                this.$el.find(".forminator-pagination").css({
                    //height: "0",
    				height: "auto",
                    opacity: "0",
                    visibility: "hidden"
                }).attr("aria-hidden", "true"), this.$el.find("[data-step=" + t + "]").css({
                    height: "auto",
                    opacity: "1",
                    visibility: "visible"
                }).removeAttr("aria-hidden");
                var r = this.$el.data("forminatorFront");
                void 0 !== r && r.responsive_captcha(), this.update_navigation(), e && this.scroll_to_top_form()
            },
            update_navigation: function() {
                this.$el.find(".forminator-current").removeClass("forminator-current"), this.$el.find(".forminator-step-" + this.step).addClass("forminator-current"), this.calculate_bar_percentage()
            },

    I’ve included a few extra lines of code from the file – so you know the exact block\area you need to be in. Then replace it entirely with

            go_to: function(t, e) {
                if (this.step = t, t === this.totalSteps) return !1;
                this.$el.find(".forminator-pagination").css({
                    //height: "0",
    				height: "auto",
                    opacity: "0",
                    //visibility: "hidden"
    				display: "none"
                }).attr("aria-hidden", "true"), this.$el.find("[data-step=" + t + "]").css({
                    height: "auto",
                    opacity: "1",
                    //visibility: "visible"
    				display: "block"
                }).removeAttr("aria-hidden");
                var r = this.$el.data("forminatorFront");
                void 0 !== r && r.responsive_captcha(), this.update_navigation(), e && this.scroll_to_top_form()
            },
            update_navigation: function() {
                this.$el.find(".forminator-current").removeClass("forminator-current"), this.$el.find(".forminator-step-" + this.step).addClass("forminator-current"), this.calculate_bar_percentage()
            },

    There should be no issue with double quotes etc.

    HIH

    Dibs

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi,

    @phalancs

    I understand your frustration and I’m sorry for keeping you waiting.

    However, current version of Forminator here is 1.12.1.1 and, as mentioned earlier in this ticket the fix for this is about to be included in 1.13 release. There’s already a pro version released so it should also be updated here soon.

    Kind regards,
    Adam

    Still not fixed in Version 1.13.4

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @phalancs

    The most recent release included, after all, only fixes related to calculations with conditionally visible fields. This had to be prioritized urgently. The 1.13 release, however, still has some minor updates (1.13.x version) to come in near future.

    Kind regards,
    Adam

    Thank you for your detailed update on this. I am confident it will come soon ๐Ÿ™‚

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.