Listbox
Prev 1. XUL Components Next

Listbox

A list box is used to display a number of items in a list. The user may select an item from the list.

A Listbox can be divided into three parts: listbox-head, listbox-foot, listbox-body. As you can see below:

CSS Definition

Description

Default Values

div.listbox

The outline of listbox

background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden;

Header part

CSS Definition

Description

Default Values

div.listbox-head

The outline of header

border: 0; overflow: hidden; width: 100%;

div.listbox-head tr

TR tag

border: 0; overflow: hidden; width: 100%;

div. listbox -head th

TH tag

overflow: hidden; border: 1px solid;

border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6;

white-space: nowrap; padding: 2px;

font-size: small; font-weight: normal;

div.head-cell-inner

The content of the header

font-size: small; font-weight: normal; font-family: Tahoma, Garamond, Century, Arial, serif;

border: 0; margin: 0; padding: 0;

overflow: hidden;

Body part

CSS Definition

Description

Default Values

div.listbox-body

The outline of body

background: white; border: 0; overflow: auto; width: 100%;

listbox-btable

TABLE tag

tr.listbox

TR tag

td.gc

TD tag

padding: 2px; overflow: hidden;

div.gc

The content of the body

font-size: small; font-weight: normal; color: black;

div.cell-inner

The content of the body

border: 0; margin: 0; padding: 0;

td.listbox td.gc

TD tag

background: white; border-top: none; border-left: 1px solid white;

border-right: 1px solid #CCC; border-bottom: 1px solid #DDD;

Footer part

CSS Definition

Description

Default Values

div.listbox-foot

The outline of footer

border: 0; overflow: hidden; width: 100%;

background: #DAE7F6; border-top: 1px solid #9EB6CE;

div.foot-cell-inner

The content of footer

border: 0; margin: 0; padding: 0;

overflow: hidden;

About sort icon in header

CSS Definition

Description

Default Values

div.listbox-head th.sort div.head-cell-inner

The icon part of sort button in listbox header.

border: 0; overflow: hidden; width: 100%;

background: #DAE7F6; border-top: 1px solid #9EB6CE; cursor: pointer; padding-right: 9px;

background:transparent url(${c:encodeURL('~./zul/img/sort/v_hint.gif')});

background-position: 99% center;

background-repeat: no-repeat;

div.listbox-head th.sort-asc div.head-cell-inner

The icon part of sort button in listbox header while press asc.

cursor: pointer; padding-right: 9px;

background:transparent url(${c:encodeURL('~./zul/img/sort/v_asc.gif')});

background-position: 99% center;

background-repeat: no-repeat;

div.listbox-head th.sort-dsc div.head-cell-inner

The icon part of sort button in listbox header while press dsc.

cursor: pointer; padding-right: 9px;

background:transparent url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')});

background-position: 99% center;

background-repeat: no-repeat;

div.foot-cell-inner

The content of footer

border: 0; margin: 0; padding: 0;

overflow: hidden;

Prev Up Next
Listbox Select Home Longbox