[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 (12.6 KiB) Viewed 339 times

... with a form using ContentBox

ContentBox_2.png (18.34 KiB) Viewed 339 times

Adding a ContentBox:

object_contentbox.png (7.37 KiB) Viewed 339 times

[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 (20.19 KiB) Viewed 333 times

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