Pin a question to the screen

  • SBVA
    Asked on October 26, 2020 at 8: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


  • Jimmy_D
    Replied 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 Screenshot 10

    Let us know if you have any questions.

    Best,

  • SBVA
    Replied 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


  • Jimmy_D
    Replied on October 26, 2020 at 1:15 PM

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

    1603729665 5f96f901c2bd7 tctN37rxCT Screenshot 10 

    #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,



  • SBVA
    Replied on October 26, 2020 at 3: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?

  • Jimmy_D
    Replied on October 26, 2020 at 4:46 PM

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

    1603742308 5f972a64f0291 LqaUBjBmfs Screenshot 10

    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,