0

How to Override Listbox Grouping CSS ?

asked 2015-01-18 11:53:42 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

updated 2015-01-19 04:44:39 +0800

Please Have a Look on the attached imageimage description

This is a listbox with grouping but you can check grouping background creating issue anyone tell me which CSS i have to override so color of grouping will not create issue

                <div>
                    <listbox emptyMessage="@load(vm.getText('LABEL_NOROWS'))" multiple="true" model="@bind(vm.folderBilledFeeModel.groupModel)"
                        width="100%" height="100%" checkmark="true" span="true" vflex="1">
                        <listhead width="100%" sizable="true">
                            <listheader width="13%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEECODE'))" />
                            <listheader width="20%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEEDESC'))" />
                            <listheader width="25%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEECOMMENT'))" />
                            <listheader width="10%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEEAMOUNT'))" />
                            <listheader width="12%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_DUEAMOUNT'))" />
                            <listheader width="14%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_PAIDAMOUNT'))" />
                            <listheader width="5%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_PAID'))" />
                        </listhead>

                        <template name="model:group" var="groupNameList">
                            <listgroup style="background:red">
                                <zk forEach="${groupNameList}">
                                    <zk if="${each != '' || 'Paid' || 'Cancelled'}">
                                        <zk if="${c:startsWith(each,'Outstanding')}">
                                            <listcell sclass="temp">
                                                <label value="${each}" style="font-weight:bold;font-size:13px;color:red;"></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Date')}">
                                            <listcell span="2" sclass="temp">
                                                <label value="${each} "></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Due')}">
                                            <listcell span="2" sclass="temp">
                                                <label value="${each} "></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Bill')}">
                                            <listcell sclass="temp">
                                                <label value="${each}"></label>
                                                <custom-attributes a="${each}" />
                                            </listcell>
                                        </zk>
                                    </zk>

                                    <zk if="${c:startsWith(each,'id')}">
                                        <listcell>
                                            <custom-attributes billNum="${each}" />
                                            <div class="btn-group">
                                                <actionmenu>
                                                    <actionmenugroup title="Options" accesskey="a" btncolor="btn-link">
                                                        <actionmenuitem label="@load(vm.getText('AccountBillFeeDetail:CB_BILL_REPORT'))"
                                                            onClick="@command('printBill',billNumber = billNum)" iconclass="fa fa-print" accesskey="a">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="@load(vm.getText('AccountBillFeeDetail:CB_ADJUST'))"
                                                            onClick="@command('adjustBill',billNumber = billNum)" tooltiptext="@load(vm.getText('AccountBillFeeDetail:CB_ADJUST'))"
                                                            iconclass="fa fa-trash">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="GL Info" onClick="@command('showGlInfo')" iconclass="fa fa-refresh"
                                                            accesskey="r">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="Fee Parms" onClick="@command('showFeeParms')"
                                                            tooltiptext="Fee Parms">
                                                        </actionmenuitem>
                                                    </actionmenugroup>
                                                </actionmenu>
                                            </div>
                                        </listcell>
                                    </zk>

                                    <zk if="${each eq 'Paid'}">
                                        <listcell sclass="temp">
                                            <headerpanel status="Paid"></headerpanel>
                                        </listcell>
                                    </zk>
                                    <zk if="${each eq 'Cancelled'}">
                                        <listcell sclass="temp">
                                            <headerpanel status="Cancelled"></headerpanel>
                                        </listcell>
                                    </zk>
                                </zk>
                            </listgroup>
                        </template>

                        <template name="model" var="accountBillFeeData">
                            <listitem width="100%">

                                <listcell>
                                    <label value="@load(accountBillFeeData.accountBillFee.feeCode)" />
                                </listcell>
                                <listcell>
                                    <label value="@load(accountBillFeeData.feeDesc)" />
                                </listcell>
                                <listcell>
                                    <label value="@load(accountBillFeeData.accountBillFee.feeComment)" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.accountBillFee.feeAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.dueAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.paidAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <zk if="${accountBillFeeData.paidInFullFlag == 'Paid'}">
                                        <x:i class="fa fa-check-circle"></x:i>
                                    </zk>
                                </listcell>
                            </listitem>
                        </template>
                        <listfoot sclass="tr-foot">
                            <listfooter></listfooter>
                            <listfooter></listfooter>
                            <listfooter></listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.sumTotalFeeAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!-- <currencylabelbox value="@load(vm.sumTotalFeeAmount)" sclass="reset-this" /> -->
                            </listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.totalDueAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!--    <currencylabelbox value="@load(vm.totalDueAmount)" sclass="reset-this" /> -->
                            </listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.totalPaidAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!--    <currencylabelbox value="@load(vm.totalPaidAmount)" sclass="reset-this" /> -->
                            </listfooter>

                        </listfoot>
                    </listbox>
                </div>
            </div>
delete flag offensive retag edit

Comments

somewhere a fiddle or running example where I can use firebug?

chillworld ( 2015-01-18 12:28:42 +0800 )edit

Thanks for reply but in my project we are using twitter bootstrap so its hard to give the example but i have added the code.

sjoshi ( 2015-01-18 13:10:07 +0800 )edit

did you try to set height listcell 100%?

chillworld ( 2015-01-18 15:56:44 +0800 )edit

I can see your image, but without any hint what you are trying to achieve it is difficult to give a suggestion. Please be a little more precise an what exactly is "the issue"? A screenshot of what is expected could also help.

cor3000 ( 2015-01-19 01:38:29 +0800 )edit

and BTW your question/topic says "groupbox", and I can't see any groupbox in your code. Did you post the correct code?

cor3000 ( 2015-01-19 01:41:30 +0800 )edit

2 Answers

Sort by ยป oldest newest most voted
1

answered 2015-01-19 11:26:34 +0800

virat gravatar image virat
46 3
.z-listgroup-inner .z-listcell-content, .z-listgroup-inner
            .z-listgroup-content { background-image:
            linear-gradient(white 0%, white 100%);font-weight: bold;
            color: gray;padding-left: 15px;}



            .z-listgroup-inner { border: 1px solid #8fb9d0; border-top:
            none; border-left: none; border-right: 0; }
link publish delete flag offensive edit

Comments

thanks issue fixed with some more modification in CSS

sjoshi ( 2015-01-20 11:48:42 +0800 )edit
0

answered 2015-01-20 07:59:48 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

Hi Virat i have added your Css and its not showing like this image description

link publish delete flag offensive edit

Comments

what is it showing like then? if it is "NOT" like this

cor3000 ( 2015-01-20 11:12:08 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-01-18 11:53:42 +0800

Seen: 43 times

Last updated: Jan 20 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More