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

Question

Question

Keep collection visible (don't scroll with the rest of the screen)

asked on October 3, 2022

Say I have a long form and I want to keep a certain section of it from scrolling, so when you are at the bottom of the screen you can still see the "header" or a section or collection or even a field that is filled in on the top of the screen. 

I want the top to still be visible, when I'm at the bottom:

0 0

Replies

replied on October 3, 2022

And... I love it when I figure it out after I've asked the question.

I created a section that with the class of deptsoftsect and then used this code in css:

.deptsoftsect {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
}

And as I scroll it keeps those two fields (or everything in that section) at the top:

3 0
replied on October 3, 2022

Thanks for sharing this. I am playing with it now. Very cool idea.

The only thing that I would like to add to it would be to keep the title and pagination tabs visible too.

0 0
replied on October 5, 2022

It's a little bit buggy sometimes, but I have a form I do this on using the following Javascript (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.