Set height for elements in a page | Zoho Creator Help

Set height for elements in a page

The height attribute allows you to specify the height for certain page elements to suit different viewer display choices. This attribute is specified in the <pr> tag. You can set the height as  auto , which has the browser calculate a suitable height or specify a  custom  height in pixels. Once the height of an element is set, it will remain fixed no matter the length of its content. In the case of embedded forms and reports, you can scroll through their content. 

Possible Values for height attribute

  • auto
  • fill
  • A numeric value in pixels 
autoAuto-adjusts height of <pr> based on the contents of it's child element. 
fillDynamically fills the entire height available.
A numeric value in pixels Sets the height of <pr> in a fixed number of pixels
You can use width and height combinations for <pr> to give you additional control over the layer.





Set height for embedded form, embedded report, and embed component

  1. Edit your application.
  2. Select the required page, then open the  page builder .
  3. Click to select the embedded form or report in your page.
  4. Click the  height fill  (double-sided arrow) icon in the toolbar in the header area of the page builder.
  5. Check the required option, either  Auto  or  Custom . If you choose  Custom , specify the height in pixels.
  6. In the case of embed component, you can specify the height and width in the relevant boxes.

Set height for panels, snippets, and buttons (includes embedded forms and reports as buttons)

  1. Edit your application.
  2. Select the required page, then open the  page builder .
  3. Double-click the element you want to configure. You can also click to select the required element, then click the Configure option in the toolbar at the top-center of the page builder. Here, we've selected the panel element
  4. The Panel Configuration  pane will slide in from the right. This pane has two tabs —  Design  and  Code .
  5. Click the  Code  tab and specify the  height  as  auto fill , or in  inside the <pr> tag for the panel element. The preview of the panel will be adjusted accordingly.


Let's say you've built an application name Zylker Home Appliances, in which you've  created a page named Dashboard. Below is the sample code for a button inside panel element. 

  1. <panel elementName="Panel 1">
  2. <pr width='fill' height='fill'>
  3. <pc padding='20px' bgColor='#FFCDBC' width='100%' vAlign='middle'>
  4. <pr width='auto' height='auto'>
  5. <pc padding='5px'>
  6. <pr width='fill' height='auto'>
  7. <pc width='100%'>
  8. <text size='20px' type='Text' value='All Orders'> </text>
  9. </pc>
  10. </pr>
  11. <pr width='fill' height='auto'>
  12. <pc width='100%'>
  13. <button marginLeft='5px' marginRight='5px' marginBottom='5px' marginTop='5px' action='OpenReport' parameters='Delivery_Type=Home delivery' componentLinkName='All_Orders' target='new-window' color='#2A70E7' size='16px' bold='true' fontFamily='lato, arimo, sans-serif' text='View Today&apos;s Orders' type='flat' bgColor='#BDC9F3' cornerRadius='3px' /> </pc>
  14. </pr>
  15. </pc>
  16. </pr>
  17. </pc>
  18. </pr>
  19. </panel>


In the above output, each of the width and height combinations for <pr> tag corresponds to the following sub-elements inside the panel element.

This width and height combination corresponds to the entire (outer) panel.

This width and height combination corresponds to the inner part of the panel that holds the display data and button element.

This width and height combination corresponds to the display data of the panel.

This width and height combination corresponds to the button element inside the panel element.

    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now

            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION

                        Still can't find what you're looking for?

                        Write to us:



                          Manage your brands on social media

                              Zoho Marketing Automation

                                Zoho Sheet Resources


                                    Zoho Forms Resources

                                      Secure your business
                                      communication with Zoho Mail

                                      Mail on the move with
                                      Zoho Mail mobile application

                                        Stay on top of your schedule
                                        at all times

                                        Carry your calendar with you
                                        Anytime, anywhere

                                              Zoho Sign Resources

                                                Sign, Paperless!

                                                Sign and send business documents on the go!

                                                Get Started Now

                                                        Zoho TeamInbox Resources

                                                                Zoho DataPrep Resources

                                                                  Zoho DataPrep Demo

                                                                  Get a personalized demo or POC

                                                                  REGISTER NOW

                                                                    Design. Discuss. Deliver.

                                                                    Create visually engaging stories with Zoho Show.

                                                                    Get Started Now

                                                                                          • Related Articles

                                                                                          • Display name for page elements

                                                                                            Display names for page elements allow you to easily identify and differentiate elements with a click, rather than opening each element and going through the configurations (especially for snippets). To modify display name for elements Navigate to the ...
                                                                                          • Configure parameters for page elements

                                                                                            Note: Page parameters are now improvized as page variables! All your existing page parameters have been moved to the Page Variables and Script tab at the top-right of the page builder. In this tab, you can continue to use these parameters as ...
                                                                                          • Set height

                                                                                            Set height for form fields Applicable to the following fields: Multi line , multi select , and rich text . Open the form builder. Select the required field. Navigate to the Field Properties -> Appearance section on the right. Enter the required value ...
                                                                                          • Understand page builder

                                                                                            While creating a business application, you would prefer tools that aid quick, tangible visual techniques. Page builder in Zoho Creator is a tool that allows you to build your custom pages using a simple drag and drop interface. Essentials: Page ...
                                                                                          • Field height

                                                                                            Understand setting the height of form fields Applicable to the following fields: multi-line and rich-text. Height is not applicable when your users access your form from a phone/tablet. The property Height enables you to set the height in which the ...
                                                                                          Wherever you are is as good as
                                                                                          your workplace



                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.


                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.


                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.

                                                                                            CRM Tips

                                                                                            Make the most of Zoho CRM with these useful tips.

                                                                                              Zoho Show Resources