How to align Menu - Menuitem to the right ?

asked 2010-06-30 12:23:21 +0800

Zoser
36 ● 1

Hi,

The zk menubar show first menuitem on left, is it possible to display the menuitem on the right of menu bar ?

Thanks

delete flag offensive retag edit

10 Replies

Sort by » oldest newest

answered 2010-07-07 02:17:33 +0800

ashishd

1972 ● 6

Hi Zoser,
include this in your zul file

<style>
.z-menu-item {
	text-align: right;
}
</style>

Also please take few minutes to read ZK style guide class concept here to understand how to modify/override ZK components default style. Especially in your case menubar/menuitem style information.

link publish delete flag offensive edit

answered 2010-07-13 03:30:32 +0800

Zoser
36 ● 1

Hi Ashish,
thank you for your reply,

I try to include the style tag in zul page, it works .. but is't what i want !

it's possible apply "aling: right" attribute to menubar div ?

Example

<div z.zcls="z-menubar-hor" class="z-menubar-hor" z.type="zul.menu2.Menubar2" id="z_ga_1"></div>

<div z.zcls="z-menubar-hor" class="z-menubar-hor" z.type="zul.menu2.Menubar2" id="z_ga_1" aling="right"></div>

Thanks

link publish delete flag offensive edit

answered 2010-07-13 03:49:22 +0800

ashishd

1972 ● 6

Hi Zoser,
I am not sure if this will work and even if it works I wouldn't recommend it. Either change default style of menubar component by overriding as described in the style guide or have a custom style on the zul page using style tag as I told you before. May I ask why you do not want the above mentioned workaround?

link publish delete flag offensive edit

answered 2010-07-13 04:24:25 +0800

Zoser
36 ● 1

Sure,

<style>
.z-menu-item {
	text-align: right;
}
</style>

this solution set the text and icons on the right
but what I want to align only the menu on the right menubar

my doubt is that the attribute align is not possible to set form CSS

link publish delete flag offensive edit

answered 2010-07-13 04:44:39 +0800

ashishd

1972 ● 6

Hi Zoser,
Ah now I understand what exactly you want. I don't know some answer off the top of my head right now. You might need to dig in discover some CSS hack for this. Take a look at here and here to start looking in that direction. CSS float right is what you want I guess. Let us know if you find any answer to this.

link publish delete flag offensive edit

answered 2010-07-13 06:06:17 +0800

SimonPai
1696 ● 1

Hi Zoser, Ashish,

Just found a way to work around:

<zk>
	<style>
.dm-menuitem {
	width: 100%;
}
.dm-menuitem .z-menu-item-cnt {
	display: none;
}
	</style>
	<window title="Menubar Test" border="normal" width="500px" height="500px">
		<menubar>
			<menuitem sclass="dm-menuitem" />
			<menu label="Menu 1" />
			<menu label="Menu 2" />
			<menu label="Menu 3" />
		</menubar>
	</window>
</zk>

The idea is to put a dummy Menuitem in front of all Menu components, which has 100% width with children DOM elements NOT displayed.
It works on FF, IE, Chrome, Opera, Safari, but I don't know whether there will be a side effect.

Regards,
Simon

link publish delete flag offensive edit

answered 2010-07-13 07:14:02 +0800

Zoser
36 ● 1

Perfect,
is a trick but it works very well ...

with this solution I can have menuitem to right, to left, and both sides ....

Really thanks for your help, Simon and Ashish

Zoser

link publish delete flag offensive edit

answered 2012-08-03 12:44:02 +0800

jhook
21 ● 2

Thank you so much for this suggestion it is just what I was looking for.

One issue I did have was that the dummy menu item still shows up as an outlined box when you float your mouse over it. Setting disabled="true" fixes this problem.

Thanks again!
John