Menu surface
I'm having problems with a menu item :(
Image is required to be included, but not allowed So question without spirit without it
I cannot change the width of the dropdown menu, I have included the style in the head and the width associated with each menu item, but they don't make any difference:
<style>
ui-menu .ui-menu-parent .ui-menu-child
{
width: 400px; /* exagerated !! */
}
</style>
When a menu item is highlighted, the selection bar is the correct width!
Any hints ???, here is a sample menu
<p:menubar>
<p:submenu label="Menu 1"
style="text-align: left;">
<p:menuitem ajax="false"
action="/Page1"
value="Page 1"
style="width: 350px;"/>
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 350px;" />
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 350px;" />
</p:submenu>
<p:menuitem ajax="false"
action="/Page2"
value="Page 2" />
</p:menubar>
source to share
The styling element inside the head is probably being overridden by the Primefaces stylesheets that are placed after it in the page markup. If you browse Firebug, you will probably notice that the custom styling is actually being overridden by the Primefaces stylesheets.
In this post, your stylesheet is correct because with Firebug I was able to increase the width of the menu by forcing this style on the DOM element.
Try putting this style tag inside the body and see if it doesn't matter.
source to share
Thank you, thank you, thank you, finally the answer is here
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Prime Faces Examples - ??</title>
<style>
ul.ui-menu-child
{
width: 460px !important;
}
</style>
</h:head>
<h:body>
<h:form>
<p:menubar>
<p:submenu label="Menu 1"
style="text-align: left;">
<p:menuitem ajax="false"
action="/Page1"
value="Page 1"
style="width: 450px;"/>
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 450px;" />
<p:menuitem ajax="false"
action="/too_long_page"
value="Some really long menu text that is far too long"
style="width: 450px;" />
</p:submenu>
<p:menuitem ajax="false"
action="/Page2"
value="Page 2" />
</p:menubar>
</h:form>
</h:body>
</html>
source to share