When I put two MenuButtons in a Toolbar, everything work fine in Firefox. But when I try in Chrome, these two MenuButtons will show in two rows.
Thanks very much!
Yi
MenuButton display problem in Chrome
- jim@jimtough.com
- Posts: 142
- Joined: 03 Jun 2011, 18:06
- Location: Canada
I am experiencing this problem in IE7 also.
I have just upgraded from 3.0-M3 to the current 3.0-M4-SNAPSHOT and the problem started after the upgrade. Two <p:menuButton> elements in the same <p:toolbar> will cause the second <p:menuButton> to wrap to a new line.
It doesn't matter what content is in the <p:menuButton>'s. I tried separating the two elements in different <p:toolbarGroup>'s and also with a <p:divider> but it did not fix the problem.
Can anyone suggest a CSS workaround?
I have just upgraded from 3.0-M3 to the current 3.0-M4-SNAPSHOT and the problem started after the upgrade. Two <p:menuButton> elements in the same <p:toolbar> will cause the second <p:menuButton> to wrap to a new line.
It doesn't matter what content is in the <p:menuButton>'s. I tried separating the two elements in different <p:toolbarGroup>'s and also with a <p:divider> but it did not fix the problem.
Can anyone suggest a CSS workaround?
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Works fine for me locally.
- jim@jimtough.com
- Posts: 142
- Joined: 03 Jun 2011, 18:06
- Location: Canada
Here is the code to demonstrate the problem. Drop this into any PrimeFaces webapp and open the page using IE7.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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:ui="http://java.sun.com/jsf/facelets">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>toolbar test</title>
</f:facet>
</h:head>
<h:body>
<h:form>
<div>
<h4>BROKEN</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonR" value="R" />
<p:menuButton id="menuButtonS" value="S" />
<p:menuButton id="menuButtonT" value="T" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonX" value="X" />
<p:menuButton id="menuButtonY" value="Y" />
<p:menuButton id="menuButtonZ" value="Z" />
</p:toolbarGroup>
</p:toolbar>
</div>
<div>
<h4>OK</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonU" value="U" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonV" value="V" />
</p:toolbarGroup>
</p:toolbar>
</div>
<div>
<h4>BROKEN</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonA" value="A" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonB" value="B" />
<p:commandButton image="ui-icon-person"
title="cb1" value="cb1" ajax="false" />
<p:commandButton image="ui-icon-power"
title="cb2" value="cb2" ajax="false" />
</p:toolbarGroup>
</p:toolbar>
</div>
</h:form>
</h:body>
</f:view>
</html>
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Wasn't it chrome we were talking about?
We'll test this later during M4 release's IE tests, noted down. We usually run our IE tests a couple of days before the release.
We'll test this later during M4 release's IE tests, noted down. We usually run our IE tests a couple of days before the release.
- jim@jimtough.com
- Posts: 142
- Joined: 03 Jun 2011, 18:06
- Location: Canada
One of the CSS styles that is used on the HTML <BUTTON> generated by the <p:menuButton> element is:
I searched Google and found these pages that describe similar problems with IE7 related to inline-block:
http://grasshopperpebbles.com/css/css-i ... -ie7-hack/
http://foohack.com/2007/11/cross-browse ... k-styling/
I just downloaded the current version of Google Chrome and confirmed that it works correctly. This problem appears to be specific to IE7 (which is what my customer uses in their corporate environment). You might want to rename this discussion thread to "menuButton display problem in IE7".
Code: Select all
display: inline-block
http://grasshopperpebbles.com/css/css-i ... -ie7-hack/
http://foohack.com/2007/11/cross-browse ... k-styling/
I just downloaded the current version of Google Chrome and confirmed that it works correctly. This problem appears to be specific to IE7 (which is what my customer uses in their corporate environment). You might want to rename this discussion thread to "menuButton display problem in IE7".
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
IE7 bug then, noted down, thanks.
- jim@jimtough.com
- Posts: 142
- Joined: 03 Jun 2011, 18:06
- Location: Canada
I think I have a workaround until this issue is fixed. Here is an updated version of my HXTML page that shows the error as well as the workaround:
The facelet page above includes the CSS hack right in the page header. To declare the CSS hack class in a separate script file, it would look like this:
You must declare the styleClass as 'inlineBlockHack' on each <p:menuButton> in the toolbar.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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:ui="http://java.sun.com/jsf/facelets">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>toolbar test</title>
</f:facet>
<style type="text/css">
.inlineBlockHack {
zoom:1;
*display:inline;
}
</style>
</h:head>
<h:body>
<h:form>
<h2>No workaround applied</h2>
<div>
<h4>BROKEN</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonR" value="R" />
<p:menuButton id="menuButtonS" value="S" />
<p:menuButton id="menuButtonT" value="T" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonX" value="X">
<p:menuitem id="miX1" value="miX1" icon="ui-icon ui-icon-pencil">
<f:param name="foo" value="bar" />
</p:menuitem>
<p:menuitem id="miX2" value="miX2" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miX3" value="miX3" icon="ui-icon ui-icon-pencil" />
</p:menuButton>
<p:menuButton id="menuButtonY" value="Y">
<p:menuitem id="miY1" value="miY1" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miY2" value="miY2" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miY3" value="miY3" icon="ui-icon ui-icon-pencil" />
</p:menuButton>
<p:menuButton id="menuButtonZ" value="Z" />
</p:toolbarGroup>
</p:toolbar>
</div>
<div>
<h4>OK</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonU" value="U" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonV" value="V" />
</p:toolbarGroup>
</p:toolbar>
</div>
<div>
<h4>BROKEN</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonA" value="A" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonB" value="B">
<p:menuitem id="miB1" value="miB1" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miB2" value="miB2" icon="ui-icon ui-icon-pencil" />
</p:menuButton>
<p:commandButton image="ui-icon-person"
title="cb1" value="cb1" ajax="false" />
<p:commandButton image="ui-icon-power"
title="cb2" value="cb2" ajax="false" />
</p:toolbarGroup>
</p:toolbar>
</div>
</h:form>
<hr/>
<h:form>
<h2>With workaround applied</h2>
<div>
<h4>WAS BROKEN</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonR" value="R" styleClass="inlineBlockHack" />
<p:menuButton id="menuButtonS" value="S" styleClass="inlineBlockHack" />
<p:menuButton id="menuButtonT" value="T" styleClass="inlineBlockHack" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonX" value="X" styleClass="inlineBlockHack">
<p:menuitem id="miX1" value="miX1" icon="ui-icon ui-icon-pencil">
<f:param name="foo" value="bar" />
</p:menuitem>
<p:menuitem id="miX2" value="miX2" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miX3" value="miX3" icon="ui-icon ui-icon-pencil" />
</p:menuButton>
<p:menuButton id="menuButtonY" value="Y" styleClass="inlineBlockHack">
<p:menuitem id="miY1" value="miY1" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miY2" value="miY2" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miY3" value="miY3" icon="ui-icon ui-icon-pencil" />
</p:menuButton>
<p:menuButton id="menuButtonZ" value="Z" styleClass="inlineBlockHack" />
</p:toolbarGroup>
</p:toolbar>
</div>
<div>
<h4>NO FIX REQUIRED</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonU" value="U" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonV" value="V" />
</p:toolbarGroup>
</p:toolbar>
</div>
<div>
<h4>WAS BROKEN</h4>
<p:toolbar>
<p:toolbarGroup align="left">
<p:menuButton id="menuButtonA" value="A" styleClass="inlineBlockHack" />
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:menuButton id="menuButtonB" value="B" styleClass="inlineBlockHack">
<p:menuitem id="miB1" value="miB1" icon="ui-icon ui-icon-pencil" />
<p:menuitem id="miB2" value="miB2" icon="ui-icon ui-icon-pencil" />
</p:menuButton>
<p:commandButton image="ui-icon-person"
title="cb1" value="cb1" ajax="false"
styleClass="inlineBlockHack" />
<p:commandButton image="ui-icon-power"
title="cb2" value="cb2" ajax="false"
styleClass="inlineBlockHack" />
</p:toolbarGroup>
</p:toolbar>
</div>
</h:form>
</h:body>
</f:view>
</html>
Code: Select all
/* Workaround for CSS problem in IE7 when PrimeFaces uses display:inline-block.
Need to use !important otherwise PrimeFaces will override this styling.
REFERENCE: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
*/
.inlineBlockHack {
zoom:1 !important;
*display:inline !important;
}
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
You can use .ui-menubutton as well to apply all menubuttons, we'll work on this tomorrow.
- jim@jimtough.com
- Posts: 142
- Joined: 03 Jun 2011, 18:06
- Location: Canada
FYI - This problem is still occurring in 3.0-M4 final
Submitted defect report: http://code.google.com/p/primefaces/iss ... il?id=2716
Submitted defect report: http://code.google.com/p/primefaces/iss ... il?id=2716
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
-
- Information
-
Who is online
Users browsing this forum: No registered users and 28 guests