MenuButton display problem in Chrome

huangyi00 · 23 Sep 2011, 11:36

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

jim@jimtough.com · 19 Oct 2011, 15:04

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?

19 Oct 2011, 15:13

Works fine for me locally.

jim@jimtough.com · 19 Oct 2011, 16:08

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>

19 Oct 2011, 16:26

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.

jim@jimtough.com · 19 Oct 2011, 17:40

One of the CSS styles that is used on the HTML <BUTTON> generated by the <p:menuButton> element is:

Code: Select all

display: inline-block

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".

19 Oct 2011, 19:54

IE7 bug then, noted down, thanks.

jim@jimtough.com · 19 Oct 2011, 20:06

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:

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>

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:

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;
}

You must declare the styleClass as 'inlineBlockHack' on each <p:menuButton> in the toolbar.

19 Oct 2011, 21:09

You can use .ui-menubutton as well to apply all menubuttons, we'll work on this tomorrow.

jim@jimtough.com · 31 Oct 2011, 17:35

FYI - This problem is still occurring in 3.0-M4 final

Submitted defect report: http://code.google.com/p/primefaces/iss ... il?id=2716

MenuButton display problem in Chrome

Who is online