0

Custom css class is not visible for menuitem

asked 2019-09-19 17:34:39 +0800

BrickWithGlasses gravatar image BrickWithGlasses
103 2

updated 2019-09-20 11:51:19 +0800

hawk gravatar image hawk
2455 1 5
http://hawkphoenix.blogsp... ZK Team

I want to highlight menu items to visualize what is current page.

My template:

<zk>
<style>
    .mymenuitem .z-menuitem {
        font-weight: bold !important;
        color: red !important;
        background-color: red !important;
    }

    .z-menuitem-content {
        background: none !important;
    }

</style>

<div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('ua.dynamicdemoadmin.viewmodel.MenuModel')">
    <!--<include hflex="1" src="include-menu.zul"/>-->
    <menubar id="mainMenu" orient="horizontal">

        <menuitem label="profiles" onClick="@command('getProfiles')">
            <attribute name="sclass" if="${vm.currentPosition == '/clients'}">
                mymenuitem
            </attribute>
        </menuitem>
        <menuitem label="contracts" onClick="@command('getContracts')">
            <attribute name="sclass" if="${vm.currentPosition == '/contracts'}">
                mymenuitem
            </attribute>
        </menuitem>
        <menuitem sclass="boldItem" label="cards" onClick="@command('getCards')">
            <attribute name="sclass" if="${vm.currentPosition == '/cards'}">
                mymenuitem
            </attribute>
        </menuitem>

    </menubar>
</div>        
</zk>

What I see in result html, is that css class is applied, but in styles tab (Chrome DevTools) .mymenuitem class is absent.

Second problem is that li tag that menuitem is converted to, contains a tag that is actually js applied to. And it's background covers changes in li. At current moment I, don't know how to make what I want.

delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted
1

answered 2019-09-20 12:09:05 +0800

hawk gravatar image hawk
2455 1 5
http://hawkphoenix.blogsp... ZK Team

The correct css is:

    .mymenuitem.z-menuitem {
        font-weight: bold;
        color: red;
        background-color: red;
    }

No space character between 2 selectors. The result is like:

image description

I don't understand your second problem, could you show me a screenshot of what you expected? (I have allowed you to upload an image)

link publish delete flag offensive 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: 2019-09-19 17:34:39 +0800

Seen: 7 times

Last updated: Sep 20

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