You are viewing limited content. For full access, please sign in.

Question

Question

Always show pagination tabs

asked on October 4, 2022

I am trying to set the Form pagination tabs so that they are always displayed at the top. So that when the user scrolls down the form page, the tabs are always there.

Based on this post - Keep navigation bar for tabs static - Laserfiche Answers

I have been trying variations of this CSS.

.cf-pagination div {position: relative;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;}

I am assuming that there is more to it than what I am trying :)

 

0 0

Answer

SELECTED ANSWER
replied on October 5, 2022

This worked for me:

.cf-pagination {
  position: fixed;
  top: 0;
  border-bottom: 2px solid #444442;
  background-color: white;
  z-index: 10;
}

0 0
replied on October 6, 2022

Thanks Katy.

I used your CSS and a bit more. This holds the Form title and pagination tabs at the top. The sections fold up below the title and pagination tabs. It works quite well.

div#cf-formtitle {
  width:1399px;
  height:90px;
  position: fixed!important;
  top: 0;
  border-bottom: 2px solid #444442;
  background-color: white;
  z-index: 12;
}

.cf-pagination-tabs {
  position: fixed;
  top: 45px;
  border-bottom: 2px solid #444442;
  background-color: white;
  z-index: 11;
}

.stickSectionToTop {
  position: sticky;
  top: 120px;
  border-bottom: 2px solid #444442;
  background-color: white;
  z-index: 1;
}

.cf-form {padding-top:70px!important;}
.form-header {padding-top:20px!important;}

h1 {text-align:right!important;}
label {text-align:right!important;}

All in CSS. Use stickSectionToTop in the Section headers.

 

 

2 0

Replies

replied on October 5, 2022

I just posted this as a reply to another question about keeping a collection fixed on the screen.

https://answers.laserfiche.com/questions/202711/Keep-collection-visible-dont-scroll-with-the-rest-of-the-screen#202795

This Javascript also keeps the form header, including the pagination tabs fixed in position (tested on Forms version 11.0.2201.20436): 

$(document).ready(function() {
  
  //The following code fixes the form header and any sections with the stickSectionToTop class 
  //to the top of the form.
  //For best results, on each page of your form, add a section with class stickSectionToTop, then
  //add another section below that (you can select the option to hide the title if desired).
  //In the second section, start with a custom HTML element which is just filled with line breaks
  //and no text.  You may need to experiment with how many line breaks are needed.  This is because
  //with the first section (that has the stickSectionToTop class) set to fixed positioning, the form
  //items below it will actually stay behind it.  The line breaks ensure that when scrolled to the
  //top, the ensire form is visible, and no part is hidden behind the section that is stuck to the
  //top.
  
  //Remove the margin at the top of the form, to avoid seeing the form scroll above the header:
  $('.cf-formwrap').css('margin-top', '0px');  
  //Gather all positioning details of the sections, before modifying to help position correctly:
  var formBorderWidth = $('.cf-formwrap').css('border-width');
  var formBorderStyle = $('.cf-formwrap').css('border-style');
  var formBorderColor = $('.cf-formwrap').css('border-color');
  var formWidth = $('.cf-formwrap').css('width');
  var formTop = $('.cf-formwrap').css('top');
  var titleWidth = $('#cf-formtitle').css('width');
  var titleTop = $('#cf-formtitle').css('top');
  var sectionWidth = $('.stickSectionToTop').css('width');
  var sectionTop = $('.stickSectionToTop').position().top + 'px';
  //Add a white background behind the sticky section to ensure form cannot be seen scrolling
  //through the section:
  $('#cf-formtitle').before('<div class="stickWhiteBackgroundToTop" style="position: fixed; z-index: 100; background-color: white; height: ' + sectionTop + '; width: ' + sectionWidth + '; top: ' + formTop + ';"></div>');
  //Fix the form header into position on the top of the form:
  $('#cf-formtitle').css('position', 'fixed').css('width', titleWidth).css('top', titleTop).css('z-index', '101');
  //Fix the form border into position on the top of the form, so it doesn't scroll away:
  $('#cf-formtitle').before('<div class="stickBorderToTop" style="position: fixed; z-index: 102; margin-top: -' + formBorderWidth + '; margin-left: -' + formBorderWidth + '; width: ' + formWidth + '; height: 0; top: ' + formTop + '; border-top-width: ' + formBorderWidth + '; border-top-style: ' + formBorderStyle + ' ; border-top-color: ' + formBorderColor + ';"></div>');
  //Fix the section(s) with the stickSectionToTop into position on the top of the form.
  $('.stickSectionToTop').each(function() {
    $(this).css('position', 'fixed').css('width', sectionWidth).css('top', sectionTop).css('z-index', '103').css('background-color', 'white');
  });
  
});

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.