Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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.
It's not too hard to find this out by opening the developer tools and simply look at what's there. It's 2018 and the available tools have improved by a lot in the recent 9 years.
A simple right-click -> "Inspect Element" reveals the "secret":
<a class="z-menuitem-content">
<img src="data:image/png;base64,R0lGODl..."
class="z-menuitem-image" align="absmiddle">
<span class="z-menuitem-text">menuitem 1</span>
</a>
The image taking space uses the class z-menuitem-image.
So one possible style to hide the menuitem image is:
.z-menuitem-image {
display: none;
}
http://zkfiddle.org/sample/2g0e1d5/2-menuitem-no-space-for-image
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 ?
Thank you, Jumper :)
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.
HI,
Please try this:
.z-menu-popup {
background-image: none;
}Using firebug in Firefox is a fast way to dig the CSS.
/Jumper
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.
Hi,
You can try this
<style>
.z-menu-item-img{
display:none;
}
</style>/Jumper
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
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.
Asked: 2009-08-27 04:55:59 +0800
Seen: 816 times
Last updated: Apr 12 '18