Horizontal Divider

You can use the horizonal divider to create two or more sections along the width of the page. You can also use the horizontal divider to create a static upper panel and a middle pane that displays the content of different pages.

Usage

When to Use

You can use the horizontal divider when: –> You want to create a top navigation bar. –> You want to create a footer section on the page.

Horizontal Divider Configuration

The “Horizontal Divider” element has the following properties:

• UI Configuration

UI Configuration

You can configure the following properties for the “Horizontal Divider” element:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rule
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	Horizontal Divider _XXXXX
Basic	Visible	If this check box is selected, the element becomes visible on the screen.	No	Selected
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	If this check box is selected, the element becomes active on the screen. The user can perform the function on the active element.	No	Selected
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
UI Properties	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.	No	Default
UI Properties-Alignment & Spacing	Margin	Allows you to define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element.	No	Theme Variable (Margin)
UI Properties-Alignment & Spacing	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
UI Properties-Shape & Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:-  If you select this option, the element will occupy the available space of the parent layout. Manual:-  If you select this option, you can define a specific size of the element.	No	Autofill
UI Properties-Shape & Decoration	Width Value	Allows you to define the width of the element in the pixel or percentage unit.	No
UI Properties-Shape & Decoration	Height Value	Allows you to define the height of the element in the pixel unit.	No	4
UI Properties-Shape & Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Current X axis co-ordinate
UI Properties-Shape & Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Current Y axis co-ordinate
UI Properties-Shape & Decoration	Dash Color	Allows you to define the color of the dash line in the horizontal divider. To define the color: –> In the Dash Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#E0E0E0
UI Properties-Shape & Decoration	Dash Gap Color	Allows you to define the color of the empty space between two adjacent dashes in the horizontal divider. To define the color of the empty space: –> In the Dash Gap Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#E0E0E0
UI Properties-Shape & Decoration	Dash Gap Length	In this box, enter the length of the empty gap that exists between two adjacent dashes.	No	20
UI Properties-Shape & Decoration	Dash Gap Radius	Allows you to define the radius of the gap that exists between two adjacent dashes in the divider.	No	0