3.0-SNAPSHOT Regression: menubar submenu border

[bumble.bee]

I've noticed in the latest 3.0-SNAPSHOT that the menubar's submenu borders have been removed. This causes a seemingly invisible submenu when the content of the page that the submenu opens into has the exact same background color. This problem can actually be observed in the labs showcase using the default theme (aristo) with IE 8:

http://www.primefaces.org/showcase-labs/ui/menubar.jsf

Note: this problem is more evident with IE because shadows aren't used. However, even with Firefox not all themes use shadows (try black-tie with FireFox for example).

[bumble.bee]

Looks like this falls under this ticket:

http://code.google.com/p/primefaces/iss ... il?id=1767

[Oleg]

Hi,

I could fix that for "sam" theme (in order to match the old "sam") as follows

Code: Select all

.wijmo-wijmenu {
    padding: 0.1em 0.3em 0.1em 0.3em;
}

.wijmo-wijmenu-horizontal,
.wijmo-wijmenu-list {
    background: none;
    background-color: #F5F5F5;  // sprite.png is better
}

.wijmo-wijmenu-link {
    white-space: nowrap !important;
}

.wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child {
    width: 220px;   // sadly, but width can not be "auto"
}

.wijmo-wijmenu-horizontal .ui-state-active {
    color: white !important;
}

.wijmo-wijmenu-horizontal div div div ul li ul {
    border: 1px solid #a8a8a8;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

[bumble.bee]

Hmm... I'm not too concerned about using the sam theme. My concern is that borders have been removed from submenus thus wrecking havoc on the layouts of applications which use the menubar.

[bluewing]

This is present in 2.2.1 as well, try http://www.primefaces.org/showcase/ui/menubar.jsf with humanity theme, hover state is barely visible.

[cagatay.civici]

We'll take a look at submenu border issue as of 3.0, there are filed tickets already. Right now workaround is to use the provided css solution.

For theme specific visual issues like humanity hover style, you can solve it with css in your app, no need to wait for PrimeFaces to update a specific theme release.

[bumble.bee]

Where is the css solution discussed?

I've seen a few threads about changing the background color, but none about adding the borders back.

The problem I have is that my app allows the user to change the theme on the fly (theme switcher). I can come up with CSS to set the submenu border to a specific color, but I haven't come up with a straight-forward way to make it dynamic based on selected theme. This is because the the theme's use the ui-widget-content class to add the borders (which are theme specific), but the ui-helper-reset class is overridding the border and setting it none.

[neijunior]

I also noticed this problem when I updated to PrimeFaces 2.2.1.

[bumble.bee]

One way to put the borders back in is to give the ui-widget-content class a higher specificity than the ui-helper-reset class. Unfortunately the only way I've been able to do that is to modify the theme.css file for a particular theme. I changed:

Code: Select all

.ui-widget-content { border: 1px solid #8e846b; ...

to:

Code: Select all

.ui-widget-content, .wijmo-wijmenu .ui-widget-content { border: 1px solid #8e846b; ...

I've got a custom theme switcher with a dozen themes so this is pretty painful in and of itself and then there is the issue that now I've got more patch code to maintain!