pringlesinn pringlesinn - 5 months ago 34
Java Question

Clicking on MenuItem without clicking on the text

I've got a Menu, and I want to click on the menu, but not on the text if you guys know what i mean.
The MenuItem has a border, or something like this, but when I click on it it won't redirect to the page I want unless I click on text.

Is it possible to click on the whole "Button" and redirect or do what is need to do?

My menu is like this:

<rich:dropDownMenu showDelay="250" hideDelay="0" submitMode="none">
<f:facet name="label">Tools</f:facet>

<rich:menuItem>
<s:link view="/pages/tools/ppaParameters/PpaParametersEdit.xhtml" value="Parameters" id="PpaParametersId" includePageParams="false" propagation="none"/>
</rich:menuItem>

<rich:menuGroup value="Security">
<rich:menuItem>
<s:link view="/pages/tools/security/ppaModule/PpaModuleEdit.xhtml" value="Module" id="PpaModuleId" includePageParams="false" propagation="none" />
</rich:menuItem>
</rich:menuGroup>
</rich:dropDownMenu>


There's an example. I need to click on text to make it work out.

alt text

Answer

Style the menu item using:

display:block;

For example, for a rich:menuItem using h:link (instead of s:link, but same idea should apply):

<rich:menuItem immediate="true">
    <h:link value="System" outcome="menu-01" id="menu-01" styleClass="menu-item-link" />
</rich:menuItem>

Within the CSS, change the menu item label class (.rf-ddm-itm-lbl):

/* Allow clicking anywhere on a menu item, not just the text. */
.rf-ddm-itm-lbl {
    display: block;
}

/* Style the menu to taste. */    
a.menu-item-link {
    color: #333333 !important;
    text-decoration: none !important;
    display: block !important;
}

/* Remove space for icons. */
.rf-ddm-emptyIcon, .rf-ddm-emptyIcon {
    display: none;
}

Note the two instances of display: block;.