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
| Value | Description |
|---|---|
| auto | Auto-adjusts height of <pr> based on the contents of it's child element. |
| fill | Dynamically 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.
| width | height | Output |
|---|---|---|
| fill | fill |
|
| fill | auto |
|
| fill | pixels |
|
| auto | auto |
|
Set height for embedded form, embedded report, and embed component
- Edit your application.
- Select the required page, then open the page builder .
- Click to select the embedded form or report in your page.
-
Click the
height fill
(double-sided arrow) icon in the toolbar in the header area of the page builder.
- Check the required option, either Auto or Custom . If you choose Custom , specify the height in pixels.
-
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)
- Edit your application.
- Select the required page, then open the page builder .
- 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
- The Panel Configuration pane will slide in from the right. This pane has two tabs — Design and Code .
- 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.
- <panel elementName="Panel 1">
- <pr width='fill' height='fill'>
- <pc padding='20px' bgColor='#FFCDBC' width='100%' vAlign='middle'>
- <pr width='auto' height='auto'>
- <pc padding='5px'>
- <pr width='fill' height='auto'>
- <pc width='100%'>
- <text size='20px' type='Text' value='All Orders'> </text>
- </pc>
- </pr>
- <pr width='fill' height='auto'>
- <pc width='100%'>
- <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's Orders' type='flat' bgColor='#BDC9F3' cornerRadius='3px' /> </pc>
- </pr>
- </pc>
- </pr>
- </pc>
- </pr>
- </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. |
