New to the community? Start here

[Forminator] Pagination buttons in mobile view

0

In the mobile view, if a form has view pages, the navigation buttons are showing up one above the other. I think the way the next and previous buttons are styled is very user-unfriendly. The issue is that the previous and next are 100% width and not in the right order.

Would you please consider positioning the buttons one next to each other?

Wed, 19 Feb 2020 5:38:45
  • Adam
    • Support Gorilla

    Hi Carl

    I hope you’re well today!

    The buttons are set to 100% width on smaller screens and that’s usually done to keep them easier to tap on mobile devices. I’d say it’s sort of a “standard practice” for forms, usually.

    It can be changed with a bit of additional CSS though: 

    
@media only screen and (max-width:783px) {
.forminator-button-back, 
.forminator-button-next {
	width:48%!important;
}

.forminator-button-back {
	float:left;
}
.forminator-button-next {
	float:right;
}
}

    This should make them in one line and stick to the sides on smaller screens so you might want to add it to the CSS of your site via form’s “Custom CSS” (in form’s “Appearance” section) or via “Appearance -> Customize -> Additional CSS” option on site.

    I have also already asked our Forminator developers if we could add such feature (I think it would be good to add it as an option rather than a “permanent change” so you could decide whether you want them full width or half-width stuck to the sides of the form) in the future.

    Best regards,
    Adam

  • Carl
    • The Incredible Code Injector

    Thanks Adam. Nastia helped me yesterday get it set as I wanted.

    I suggested the change because I noticed myself hitting the ‘previous’ button because it was on top and it was disconcerting to find myself having accidentally gone backwards.

    My thoughts were by anchoring the buttons to the left and right, the small screen version would act like most other phone apps that people are used to.

  • Adam
    • Support Gorilla

    Hi Carl

    I’m glad to hear that Nastia helped you already with setting that up for now!

    I understand the reasons why you suggested it too. It is quite a common solution to keep the buttons the way we do but of course that doesn’t mean it’s just “the only proper way” :slight_smile:

    I passed that over to our developers, suggesting adding an option (that could be switched on/off, e.g. in appearance customization settings) to allow you keep the buttons as they are now or just set them the way you proposed – I think ability to switch between these two “layouts” would make it quite universal :slight_smile:

    Best regards,
    Adam

  • Guy
    • WPMUDevWannabe

    I know it’s been a few years since this thread was last commented on, but have just been on the same path.

    I found the css above to be a bit janky and left the buttons unequal in their appearance, one marginally higher than the other.

    I did keep hitting the ‘previous’ button by accident too, but I made my CSS hack a little different by just changing the order of the buttons instead of float. Thought I’d share my solution as an alternative

    @media only screen and (max-width:783px) {

.forminator-button-back {
	order: 2;
}
.forminator-button-next {
	order: 1;
	margin-bottom: 0.5em;
}