0

How to remove the space on leftside of the menu item.

asked 2009-08-27 04:55:59 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

While showing menuitem, we can set image or checkmark. But, I don't want to show an image or a checkmark in the menuitem's.

I need just a text in the menuitem. But, its having some space on the leftside of the menuitem.

How can I remove the unwanted space occupied by the menuitem?

Thanks.

delete flag offensive retag edit

11 Replies

Sort by ยป oldest newest

answered 2009-08-27 08:11:08 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Have a look here.

You can set the padding for your needs.

link publish delete flag offensive edit

answered 2009-08-27 10:25:20 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

updated 2009-08-27 10:25:52 +0800

Thanks Terrytornado.

Basically I want to have a menuitem with text-only option in view.
Hence, I tried the following code to hide/set the menuitem's left/icon's portion width as 0px. Eventhough its showing empty space in icon's place.

<?page title="Menuitem With Text Only" contentType="text/html;charset=UTF-8"?>
<zk>
	<style>
		.z-menubar-hor .z-menu-item-body .z-menu-item-inner-l {
		font-size:1px; height:0px; line-height:0px; width:0px; }
		.z-menu-body-text-img .z-menu-inner-m .z-menu-btn {
		padding-left:1px; }
	</style>
	<window title="Menuitem With Text Only" border="normal">
		<label value="Click on me" context="editPopup" />
		<menupopup id="editPopup">
			<menuitem label="Message" />
		</menupopup>
	</window>
</zk>

Thanks.

link publish delete flag offensive edit

answered 2009-08-27 11:59:19 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2009-08-27 12:00:54 +0800

Ok. Now i know what you mean.

You will cut the left area for the images. So there's only the text area in the menuitems.
In my eyes that's a 'mold' attribut. In the docs i see only the 'default' mold.
Hope that others can help you, sorry

Stephan

link publish delete flag offensive edit

answered 2009-08-27 12:25:34 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Hi,

You can try this

<style>
.z-menu-item-img{
display:none;
}
</style>

/Jumper

link publish delete flag offensive edit

answered 2009-08-27 13:23:46 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

Thanks Jumper & Stephan.

This removes the left space allotted for icon. But, the line separator for icon from text is still there. Which resembles a line crossing the menuitem name.

Little progress on the way. I will try other options too. If anybody have any suggestion, please let me know.

Thanks.

link publish delete flag offensive edit

answered 2009-08-28 07:36:26 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

HI,

Please try this:

.z-menu-popup {
background-image: none;
}

Using firebug in Firefox is a fast way to dig the CSS.
/Jumper

link publish delete flag offensive edit

answered 2009-08-28 10:29:52 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

Thanks Jumper, you have saved me a lot of time :)

I have searched in the following page, which was referred by Stephan for Menubar StyleGuide. But, I can't able to find the ".z-menu-popup" tag.

Can you give hint on how you are knowing these tags?

Am using Internet Explorer 7 for my development environment. I will check such a tool like firebug for IE.

Thanks for your suggestion Jumper.

link publish delete flag offensive edit

answered 2009-08-31 00:55:22 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Hi,

You can refer to Menupopup style guide.

/Jumper

link publish delete flag offensive edit

answered 2009-08-31 07:04:00 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

Thank you, Jumper :)

link publish delete flag offensive edit

answered 2018-03-21 20:16:41 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2599 2 8
http://emrpms.blogspot.in...

This doses not work in ZK Latest version 8.5 due to CSS Class name changes. Can someone give us the CSS for 8.5 to achieve the same result ?

link publish delete flag offensive edit
Your reply
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
2 followers

RSS

Stats

Asked: 2009-08-27 04:55:59 +0800

Seen: 810 times

Last updated: Apr 12