Sclass is not getting apply on listheader

asked 2016-02-12 12:21:34 +0800

Bhushanngage
59 ● 6

<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul">
<style>
    .bold {
    font-weight: bold;
    color:red;
    }
</style>
<window title="listbox demo" border="normal" width="250px">
    <listbox id="box">
        <listhead sizable="true">
            <listheader id="listheaderA" label="name" sclass="bold" />
            <listheader label="gender" sort="auto" />
        </listhead>
        <listitem>
            <listcell label="Jane" />
            <listcell label="FEMALE" />
        </listitem>
        <listitem>
            <listcell label="Henry"  />
            <listcell label="MALE" />
        </listitem>
        <listfoot>
            <listfooter>
                <label value="This is footer1" />
            </listfooter>
            <listfooter>
                <label value="This is footer2" />
            </listfooter>
        </listfoot>
    </listbox>
</window>
</zk>

In above code snippet, if I use sclass for listheader listheaderA then css class 'bold' is not applied to it. But if use zclass then it works.

In the documentation, it says

Since zclass is used to name the CSS classes associated DOM elements, all the default CSS rules won't be applied if zclass is assigned with a different value. Thus, it is used to custom a component with a totally different look.

So I don't want to use neither zclass nor inline css. How can I do this with sclass ? Any help is appreciated.