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 
ValueDescription
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.

widthheightOutput
fillfill 

fillauto 

fillpixels 

autoauto 

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.

Example

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>

Output



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

Number
Description
Representation
1
This width and height combination corresponds to the entire (outer) panel.

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

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

4
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










                                    You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                        Manage your brands on social media

                                          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 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 ...
                                                                                                      • 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 ...
                                                                                                      • Understand Page Builder

                                                                                                        1. What Does this Page Cover? Learn about the page builder and how you can customize your page and its elements according to your business needs. 2. Availability Pages can be created in all plans of Creator. Only the super admin, admins, and ...
                                                                                                        Wherever you are is as good as
                                                                                                        your workplace

                                                                                                          Resources

                                                                                                          Videos

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



                                                                                                          eBooks

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



                                                                                                          Webinars

                                                                                                          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