Tip 18: How to add scrollable Add Notes field to a form.

Tip 18: How to add scrollable Add Notes field to a form.



Hello folks,

In Zoho Creator, the Add Notes field is commonly used for providing instructions or additional information to users, like to display "Terms and Conditions" or other important info. But how do you add lengthy text to the Add Notes field without making the form too long? The answer is to use HTML to add a scroll bar to the Add Notes field. 

Follow the steps below to add a scroll bar to your own Add Notes fields: 


Step 1
Drag and drop the Add Notes field into the form builder and click on Notes in Field Properties.



Step 2
Click on the Edit HTML option in the upper left corner of the window.
​


Step 3 
Add the content you want to display, and then use the code given below to add the scrollable bar.

  1. <div class="myBox">
  2. This is where the content should be added.
  3. </div> 
  4. <style>
  5. /* Box styles */
  6. .myBox {
  7. border: none;
  8. padding: 5px;
  9. font: 24px/36px sans-serif; width: 200px; 
  10. height: 200px; overflow: scroll; }
  11. /* Scrollbar styles */ ::-webkit-scrollbar { width: 12px;height: 12px; } 
  12. ::-webkit-scrollbar-track { border: 1px solid yellowgreen; border-radius: 10px; }
  13. ::-webkit-scrollbar-thumb { background: yellowgreen; border-radius: 10px;}
  14.  ::-webkit-scrollbar-thumb:hover { background: #88ba1c;}
  15.  </style> 

You can now access the live mode of the application to find the scrollable Add Notes field! 



We hope this post was useful for you. If you have any questions, feel free to ask in the comments below, and we'll be happy to address them soon! 

See you all next time, with even more interesting Creator tips!

      Bootcamp
      Community
      Pricing
      Webinars
      What's New
      Integrations
      Contact Support
      Contact Sales



          Zoho Survey Resources
            Features
            Survey Templates
            Integrations
            Community
            iOS Mobile Surveys
            Pricing
            Android Mobile Surveys
            Insurvey Blogs
            Insight Blogs
            Tips & Tricks





                          Setup Zoho Bigin in 30 Minitues
                          Latest Feature Updates

                            Zoho Desk Resources

                            • Desk Community Learning Series


                            • Digest


                            • Functions


                            • Meetups


                            • Kbase


                            • Resources


                            • Glossary


                            • Desk Marketplace


                            • MVP Corner


                            • Word of the Day




                                Zoho Marketing Automation
                                  Zoho SalesIQ Resources


                                        Manage your brands on social media
                                        Access Zoho Social

                                          Zoho Pagesense Resources


                                              Zoho TeamInbox Resources

                                                Zoho DataPrep Resources



                                                  Zoho CRM Plus Resources

                                                    Zoho Books Resources


                                                      Zoho Subscriptions Resources

                                                        Zoho Projects Resources


                                                          Zoho Sprints Resources


                                                            Qntrl Resources


                                                              Zoho Creator Resources


                                                                Zoho WorkDrive Resources



                                                                  Zoho Campaigns Resources

                                                                    Zoho CRM Resources

                                                                    • CRM Community Learning Series

                                                                      CRM Community Learning Series


                                                                    • Tips

                                                                      Tips

                                                                    • Functions

                                                                      Functions

                                                                    • Meetups

                                                                      Meetups

                                                                    • Kbase

                                                                      Kbase

                                                                    • Resources

                                                                      Resources

                                                                    • Digest

                                                                      Digest

                                                                    • CRM Marketplace

                                                                      CRM Marketplace

                                                                    • MVP Corner

                                                                      MVP Corner

                                                                    





                                                                    




                                                                        Design. Discuss. Deliver.

                                                                        Create visually engaging stories with Zoho Show.

                                                                        Get Started Now