Question T14553
Visible to All Users

Freeze a header to prevent important information from scrolling?

created 2 years ago (modified 2 years ago)

I need to prevent some instructions from being scrolled when the rest of the survey should be scrollable.

By default the Page is scrollable as well as question, and I can't figure the way hoe to make a page header.
Is there any way to achive simmilar behavior as 'Freeze columns and rows in Excel'
Keep at least one question always on top of the page as a header?

Thank you

Comments (1)

    Hello,
    Thank you for reaching out to us. Unfortunately, there is no option to pin a specific survey elements to always stay on top of a form. I'll discuss this task with our developers and let you know if there is any option to achieve this.

    Thank you

    Answers approved by surveyjs Support

    created 2 years ago

    Hello,
    You can put some important information to a survey page header area and apply the position: "sticky" CSS to pin this area to the top of a container: View Demo.

    CSS
    h4.sd-title.sd-page__title { position: sticky; top: 0px; z-index: 100; left: 0; right: 0; background-color: var( --sjs-general-backcolor-dim, var(--background-dim, #f3f3f3) ); }

    An example on how to pin a survey heading area (title & description): View Demo.

    CSS
    .sd-title.sd-container-modern__title { position: sticky; top: 0px; z-index: 100; left: 0; right: 0; }

    Let me know if you have further questions.

      Show previous comments (14)

        Hello,
        Jane takes one day off today. Probably she will share her ideas on Monday/Tuesday.
        I have created a ticket in our GitHub repo and put it into our backlog.
        Regarding this functionality itself. If you are looking for grid like widget, especially on desktop OS, then it is a must be feature.
        I was involved in creating grid controls for different desktop frameworks many years ago. I am creating libraries for software developers since 1998, literally all my life.
        I absolutely agree, I could not image a successful grid control without this functionality.
        However, if we are talking about Form library, and to be more precise form entering library, when in 98% cases an end-user enters data then you don't need this functionality.
        Grid widget needs to present a lot of records. It should have sorting, grouping, filtering and searching, a footer with summaries and a header that doesn't scroll and tons of others features. Our SurveyJS Library is about editing detail forms. We are talking about different scenarios.

        Thank you,
        Andrew Telnov
        CEO, DevSoft Baltic OÜ

          Andrew Thank you for the support. Really very impressive. As well as your extended response.

          Surely I agree 100% that for the form libraries in general, it is not usual, but for multi-long-paging surveys, sometimes, very rare, it is required to hold up some guidelines.

          And for less giant but still multi-page and a bit longer than one screen, especially considering the excellent Survey.JS branding feature for the header, it makes sense to keep the branded header on top, preventing it from scrolling, right? Otherwise it is not that important if the header is branded or not.

          I have no intention to argue, I understand that my need is rare.

            Thank you for kind words and I totally agree that it could be nice to have freeze headers in matrix. However, I would have this functionality in our back-log. There is a work-around and it may require some resource to implement it out of the box. We should check how it works for different matrices and for different devices, including mobile.
            Since we have a lot of tasks in our list and I would like to came back to this feature later. If there were not a work-around then it would be another story of course.

            Thank you,
            Andrew Telnov
            CEO, DevSoft Baltic OÜ