[Added] ContentBox Object

[admin]

Group related information into logical blocks or sets. Grouping together related fields will also help users make sense of the information they must fill in.
The new ContentBox makes it easy to add a visual and semantic grouping for form controls.

Demo at https://demo.nubuilder.cloud/

Compare the ungrouped data:

ContentBox.png

... with a form using ContentBox

ContentBox_2.png

Adding a ContentBox:

object_contentbox.png

[admin]

"Arrange Objects" now also shows the ContentBox "frame"

[admin]

By modifying and adding these 3 classes in the Header Tab of Setup, you can customise the look of the ContentBox.

Code: Select all

 .nuContentBox .content {
	height:inherit;
	padding:10px;
	font-size:15px;
	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
	border:1px solid #dddddd;
	background-color:#fff
}
 .nuContentBox .title {
	height:4px;
	line-height:4px;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	color:#333;
	font-size:14px;
	font-weight:700;
	font-family:sans-serif,"Segoe UI",Helvetica,"Helvetica Neue",Arial,sans-serif;
	display:block;
	padding:9px;
	letter-spacing:1px
}
 .nuContentBox {
	z-index:-1;
	position:absolute;
	height:90px
}

Example, colors changed:

custom_color.png

Update: Styling has become even easier:
https://forums.nubuilder.cloud/viewtopic.php?f=31&t=11294