Image:stop.png This documentation is for an older version of ZK. For the latest documentation please click here.
Groupbox
Single Page

Groupbox

Groupbox has two mold: Default and 3d. Groupbox combines Caption as its title.

Note:

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-fieldset

Supported

V

CSS Specification:

Class Name

Description

Default Values

.z-fieldset-cnt

Overflow of content

overflow: hidden;

Mold: 3d

Groupbox's 3d mold is made by 3*3 grid style.

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-groupbox

Supported

V

CSS Specification:

Class Name

Description

Default Values

.z-groupbox-header

Overflow of header

overflow: hidden; zoom: 1;

.z-groupbox-tl .z-groupbox-header

Font size

Color: #373737; font-family: ${fontFamilyT};font-size: ${fontSizeM}; font-weight: normal; padding: 5px 0 4px 0; border: 0 none; background: transparent;

.z-groupbox-tm

Background of top middle

background: transparent url(${c:encodeURL('~./zul/img/groupbox/groupbox-tb.png')}) repeat-x 0 0; overflow: hidden;

.z-groupbox-tl

Background of top left

background: transparent url(${c:encodeURL('~./zul/img/groupbox/groupbox-corners.png')}) no-repeat 0 0; padding-left: 6px; zoom: 1; border-bottom: 1px solid #B2CCD9;

.z-groupbox-tr

Background of top right

background: transparent url(${c:encodeURL('~./zul/img/groupbox/groupbox-corners.png')}) no-repeat right 0; zoom: 1; padding-right: 6px;

.z-groupbox-cnt

Border of content

border: 1px solid #B2CCD9; padding: 5px;

.z-groupbox-bm

Background of bottom middle

background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px; font-size: 0; line-height: 0; zoom: 1;

.z-groupbox-bl

Background of bottom left

background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left: 6px; zoom: 1;

.z-groupbox-br

Background of bottom right

background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat right bottom; padding-right: 6px; zoom: 1;