Question

Fixing height of pagination tab page (or move navigation buttons to top of page)

Forms Version 10

Updated September 21, 2017

asked on September 20, 2017

Hi,

I have a 3-6 pages being shown using pagination tabs. Because the information within the pages is dynamic depending on answers given, the pages are of differing heights. Hence the "Next" button is in a different location depending of the page height. Is there a way to either fix them on the top of the pages or fix the height of the page so that the buttons are in a fixed location?

Thanks.

I am using Forms 10.2

0 0

Answer

SELECTED ANSWER

replied on September 20, 2017

Hi Farid,

To fix the height of pagination tab content, use CSS like this:

.cf-page .cf-section-block {
  height: 500px;
  overflow-y:scroll;
}

To move navigation buttons to top of page, you can disabled the "Previous/next buttons" on pagination options, and add the following in a custom HTML field, and then place the custom HTML field on top of all fields in each page:

<div class="cf-pagination-btn"><input type="button" class="cf-prev-btn" value="Previous"><div class="cf-pagination-btn-spacer"></div><input type="button" class="cf-next-btn" value="Next"></div>

2 0

Replies

replied on September 21, 2017

Thank you Sir! Worked like a dream!

1 0

You are not allowed to follow up in this post.

Question

Question

Fixing height of pagination tab page (or move navigation buttons to top of page)

Answer

Replies

Sign in to reply to this post.