Pin a question to the screen

  • Profile Image
    SBVA
    Asked on October 26, 2020 at 08:55 AM

    Is it possible to pin a question to the screen so that when you scroll up and down, that particular question remains in place...

    For example, I have a Exam Question paper being displayed to the user. I am using Paragraph field to show the QP and user can scroll up and down to see many questions. But I wanted to add a field so that examinee can check off which questions he/she answered. This field must be pinned to screen (kept in place) so that when the user scrolls down to see the questions this field also does not goes off the screen


  • Profile Image
    Jimmy_D
    Answered on October 26, 2020 at 10:21 AM

    Thanks for contacting us.

    You can achieve this using Custom CSS code.

    Example:

    #id_10{

     position: sticky;

     top: 0px;

     z-index: 100;

     color: #EF6530;

     background: white;

     text-align: center;

    }

    Related guide: how-to-inject-custom-css-codes

    Demo Form.- https://form.jotform.com/202994366257062

    1603722083_5f96db634ad35_UK8Rj0CM4I.gif

    Let us know if you have any questions.

    Best,

  • Profile Image
    SBVA
    Answered on October 26, 2020 at 11:06 AM

    Thank you for the quick response.

    I tried it and it somewhat worked. The field did get pinned as expected; But the problem is when I scroll down, the other fields are being overlaid on the pinned question.

    https://www.jotform.com/build/202564743497161


  • Profile Image
    Jimmy_D
    Answered on October 26, 2020 at 01:15 PM

    Here is the result I got when I apply the CSS code to the Timer field. 

    1603729665_5f96f901c2bd7_tctN37rxCT.gif

    #id_112{
       position: sticky;
     top: 0px;
     z-index: 100;
     color: #EF6530;
     background-color: white;
     text-align: center;
    }

    If this concept doesn't work for you, kindly tell us how you would like it to look, and we will be happy to help you.

    Regards,



  • Profile Image
    SBVA
    Answered on October 26, 2020 at 03:04 PM

    Once again thanks Jimmy_D. The way you showed in the screen shot above seems correct. But when I applied the same it is not working correctly.

    Also how did we know the Id# for each of these fields. When I look at the properties, it only shows for some of them. For example how do I know Id# for a Paragraph field?

    Can you do me a favor, and apply same "sticky" thing to ALL Fields under the section called FIXED SECTION?

  • Profile Image
    Jimmy_D
    Answered on October 26, 2020 at 04:46 PM

    You can find the selector in the browser's DevTool.

    1603742308_5f972a64f0291_LqaUBjBmfs.gif

    The Suggested CSS code did is not working because you have added some section element on the form that changes its HTML structure. 

    I applied the CSS code below to your form and got the paragraph to stick to the top.

    #id_112{
     position: fixed;
     top:0px;
     z-index: 100000;
     color: #EF6530;
     background-color: white;
     text-align: center;
     margin-top: 0px
    }
    .form-all {
        margin-top: 40px;
    }

    https://www.jotform.com/form/202564743497161

    Kindly review the form and let us know that works for you.

    Best,