Skip to main content

Hello,

      I'm looking to build a Nintex form that has a fixed top section that is visible at all times while the body of the form scrolls up and down(underneath the top section).

I almost got it to work with CSS , but the body of the form slides over the top section instead of sliding under.

I did some digging and my findings is that this kind of functionality isn't possible with CSS.

Is this possible with Nintex? or is there any nintex extension that can provide this functionality?

I have spent a lot of time on this. I'm on the verge of giving up on it.

 

Cheers!

Frank Mendes

this css could help. I haven't tried this in nintex forms. Have a go and I will try too

Fixed header, scrollable body. - JSFiddle 


Would be great if this works, please keep us up to date! If I'll find the time before you find it I will ;-)


I think this will be possible because I did something similar way long back by adding scroll bars to something, so I'm hoping ‌'s solution works for you.   If this is a long form and hence the header needing to be in view as a reference, you could also consider a "tabbed" approach where the header remains visible, and then tabs underneath reveal sections of the form.  Hopefully the scrolling works though since that is what you requested.


Frank Mendes

Now i'm in front of my machine and can test this properly, i have an update to my original answer.

It can be done a lot easir than the fiddle I posted.

To accomplish what you want i added and panel and get it a css class of scroll. I added controls to the form as required. Then i added this css to the form Custom CSS settings

.scroll{
    position: relative;
    height: 250px;
    max-height: 250px;
    overflow-y: scroll;
}‍‍‍‍‍‍‍‍‍‍‍

This sets the panel to have a height of 250 and a max height of 250 so anything over this invokes the scroll bar.

I did find it a bit fiddly having to delete the css each time to edit the form as required and then reapply but it does give the experience you want

Hope this helps


Thanks  Paul! This solution is easier than the fiddle. I tried it and it worked. however, there are now two scrolls on the page 

Is it possible to get rid of the 1st scroll bar?


On my form it worked without any additional scroll bars. do you have any other controls on the page that could be causing it?


I may be doing this wrong. Here is what I did

I have the header in one panel and the remainder of the form in another panel(2nd panel)

I then added the scroll class to 2nd panel.

Is this how you went about your own solution? 


Exactly that, the only other thing i did was in form settings ensure the design area of you form is longer than the max-height of the scrollable area, even if it is completely empty:

198576_pastedImage_2.png

Maybe that will sort it?


‌ - did ‌'s suggestion work out for you?


Reply