Align “next” and “previous” buttons

  • Resolved peacefulmind

    (@peacefulmind)


    5 years, 4 months ago

    Hi,

    I like your plugin very much. I was not able to find a better one for calculated field on the internet. Your plugin is the best one.

    At the moment I am trying to build on my webpage an online calculator.

    I have inserted “Page Break” fields, so it has multiple pages and “next” and “previous” buttons at the bottom.

    But unfortunately, the buttons are aligned to the left and it looks ugly. I would like to have them either:

    a) Centered in the middle (side by side of course);

    or

    b) The “previous” button should stay left aligned, but the “next” button should be aligned to the right.

    How could one do it?

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author codepeople

    (@codepeople)

    5 years, 4 months ago

    Hello,

    * For centering both buttons:

    Enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab(https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

    * To display the “Next Page” button at right:

    
#fbuilder .pbNext{width:120px;text-align:center;float:right;margin-right:calc( 50% - 130px );}
#fbuilder .pbPrevious{width:120px;text-align:center;float:left;margin-left:calc( 50% - 130px );}

    Use the following style definition instead of the previous one:

    
#fbuilder .pbNext{float:right !important}

    Best regards.

    Thread Starter peacefulmind

    (@peacefulmind)

    5 years, 4 months ago

    Thank you.

    The first option (centering both buttons) did not work. But that’s ok. Second option worked, so I am happy. 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Align “next” and “previous” buttons’ is closed to new replies.