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!