Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi everybody,
i have some troubles with the css in menuitem with the menubar
this code below is my zul file
menubar sclass="menulangue" height="30px">
<menuitem label="${c:l('app.menu.all')}" sclass="menuwhite" height="30px"/>
sclass="menublack"/>
<menuitem label="${c:l('app.menu.indroduction')}" height="30px" sclass="menuorange"/>
<menuitem label="${c:l('app.menu.help')}" height="30px" sclass="menuorange"/>
<menu src="/images/flag/fr.gif" width="50px" height="30px" >
<menupopup>
<menuitem forEach="${main.flagLocale}" image="/images/flag/${each}.gif" forward="onClick=main.onChangeFlag"/>
</menupopup>
</menu>
</menubar>and this code below is my ccs style
.menublack.z-menu-item .z-menu-item-btn {
color : white; /*PRO*/
font-weight : bold; /*PRO*/
font-variant : normal; /*PRO*/
font-size : 12px; /*PRO*/
}
.menublack .z-menu-item-inner-l
, .menublack .z-menu-item-inner-m
, .menublack .z-menu-item-inner-r
{
background-color : #333333; /*PRO*/
background-image : none; /*PRO*/
}
.menuorange.z-menu-item .z-menu-item-btn {
color : black; /*PRO*/
font-weight : bold; /*PRO*/
font-variant : normal; /*PRO*/
font-size : 12px; /*PRO*/
}
.menuorange .z-menu-item-inner-l
, .menuorange .z-menu-item-inner-m
, .menuorange .z-menu-item-inner-r
{
background-color : orange; /*PRO*/
background-image : none; /*PRO*/
}
.menuwhite.z-menu-item {
padding-right:0px;
padding-left:0px;
}
.menuwhite.z-menu-item .z-menu-item-btn {
color : black; /*PRO*/
font-weight : bold; /*PRO*/
font-variant : normal; /*PRO*/
font-size : 12px; /*PRO*/
}
.menuwhite .z-menu-item-inner-l,
.menuwhite .z-menu-item-inner-m ,
.menuwhite .z-menu-item-inner-r{
background-color : white; /*PRO*/
background-image : none; /*PRO*/
}
.z-menubar-hor.menulangue {
border-style: none;
padding: 0px 0px 0px 0px;
background: #333333 repeat-x 0 center;
background-image:none;
}
.z-menubar-hor.menulangue .z-menu-body .z-menu-inner-l,
.z-menubar-hor.menulangue .z-menu-body .z-menu-inner-r,
.z-menubar-hor.menulangue .z-menu-item-body .z-menu-item-inner-l,
.z-menubar-hor.menulangue .z-menu-item-body .z-menu-item-inner-r{
font-size: 1px;
height: 30px;
line-height: 0px;
width: 0px;
}but each menuitem is seperate with a padding-right:4px and padding-left:4px but it is not writing in the css of menu.css in the zul.jar with the css folder
the code source of the html page is below
<td id="zk-comp-53" align="left" z.type="Menuit2" class="menublack z-menu-item " style="height:30px;padding-left:4px;padding-right:4px;" z.zcls="z-menu-item" z.top="true">
you can see with this image that each menuitem is seperated by a padding
the link
where can i modify this padding and where it is writing??
thanks for all
is there anybody who can help me ?
Hmmmmmm, i have played a little bit. Can this helps you?
<menubar sclass="menulangue" height="30px" style="padding:5px">
<menuitem label="All" sclass="menuwhite"
height="30px" />
<menuitem label="Indroduction" height="30px"
sclass="menuorange" style="padding:5px"/>
<menuitem label="Help" height="30px"
sclass="menuorange" />
<menu src="/images/flag/fr.gif" width="50px" height="30px">
<menupopup>
<menuitem forEach="${main.flagLocale}"
image="/images/flag/${each}.gif"
forward="onClick=main.onChangeFlag" />
</menupopup>
</menu>
</menubar>
@guisimon,
You can override the method of Menu#getRealStyle() which appends the default padding at the topmost menu.
Thanks Jumperchen
it works great now
thanks
Hi jumper,
overriding getRealStyle works for 3.6, but how achieve the same on ZK 5?
I saw that the padding info is hardcoded on Menuitem.js...
So, nothing that we could do about this on ZK 5?
In ZK5, the getRealStyle is implemented by Javascript called domStyle_(), you can overwrite it by the following example, which is specified into zk.xml.
<device-config>
<device-type>ajax</device-type>
<!-- An empty URL can cause the browser to reload the same URL -->
<embed><![CDATA[
<script type="text/javascript">
zk.afterLoad('zul.menu', function () {
zul.menu.Menu.prototype.domStyle_ = function () {
return '';
}
})
</script>
]]></embed>
</device-config>Hi Jumper,
That worked out great!
Nice to see that I can override some js methods too.
Thank you and regards!
Asked: 2009-09-01 10:00:30 +0800
Seen: 1,655 times
Last updated: Jan 17 '10