You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by "Nebinger, David" <dn...@tbbgl.com> on 2007/04/25 19:34:56 UTC
display issues w/ IE...
I'm using <t:popup> to display some popup help (nothing fancy). In
firefox and opera, the popup appears with all words on a single line
(just as I'd expect).
However, under IE, each word is on it's own line. Generated HTML
(copied below) for each of the browsers are exactly the same, use the
same stylesheet defn, so I don't understand why IE is different (isn't
the JSPopup.js supposed to resolve IE-related issues like this?).
Any info that would help me resolve this issue would be greatly
appreciated!
On tomahawk 1.1.3, I'm using <t:popup> as follows:
<t:popup styleClass="portal-tool-tip" displayAtDistanceX="20">
<h:graphicImage url="/images/help.gif" />
<f:facet name="popup">
<h:outputText>Description of the security
role.</h:outputText>
</f:facet>
</t:popup>
My style class is defined as:
.portal-tool-tip {
background-color: #FFFFCC;
border: 1px solid #000000;
padding: 2px;
font-size: <%= fontS %>;
}
There are no other overrides or anything like that. The generated
source from Firefox (slightly reformatted) is:
<script type="text/javascript"><!--
var
_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ftbb
glportletsecurity_5FPopup=
new
orgApacheMyfacesPopup('_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_
tbbglportletsecurity_',20,-5);
//--></script>
<img src="/tbbgl-portlet-security/images/help.gif"
onmouseover="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.display(event);"
onmouseout="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.hide(event);" />
<div style="position:absolute;display:none;" class="portal-tool-tip"
id="_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_tbbglportletsecurit
y_"
onmouseover="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F50
4_5FWAR_5Ftbbglportletsecurity_5FPopup.redisplay();"
onmouseout="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504
_5FWAR_5Ftbbglportletsecurity_5FPopup.hide();">Description of the
security role.</div>
The generated source for IE (similarly reformatted) is:
<script type="text/javascript"><!--
var
_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ftbb
glportletsecurity_5FPopup=
new
orgApacheMyfacesPopup('_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_
tbbglportletsecurity_',20,-5);
//--></script>
<img src="/tbbgl-portlet-security/images/help.gif"
onmouseover="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.display(event);"
onmouseout="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.hide(event);" />
<div style="position:absolute;display:none;" class="portal-tool-tip"
id="_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_tbbglportletsecurit
y_"
onmouseover="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F50
4_5FWAR_5Ftbbglportletsecurity_5FPopup.redisplay();"
onmouseout="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504
_5FWAR_5Ftbbglportletsecurity_5FPopup.hide();">Description of the
security role.</div>
RE: display issues w/ IE... (SOLVED)
Posted by er...@novartis.com.
Doesn't appear to work if you have markup in the popup facet; e.g.,:
<t:popup>
<h:graphicImage url="images/icons/info.gif"
styleClass="info-icon"/>
<f:facet name="popup">
<h:panelGroup styleClass="popup">
<h:outputText value="blah blah blah"/>
<t:htmlTag value="ul">
<t:htmlTag value="li">
<h:outputText value="bullet 1"/>
</t:htmlTag>
<t:htmlTag value="li">
<h:outputText value="bullet 2"/>
</t:htmlTag>
</t:htmlTag>
</h:panelGroup>
</f:facet>
</t:popup>
.popup {
padding: 1em;
border: 1px solid black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: black;
}
.info-icon {
margin-left: 0.5em;
vertical-align: middle;
border: none;
}
Does it work for you, David, with more than just plain text?
"Nebinger, David" <dn...@tbbgl.com>
04/25/2007 05:17 PM
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
Subject
RE: <t:tooltip> display issues w/ IE... (SOLVED)
It's really nothing to do with MyFaces, Tomahawk, or even JSF for that
matter.
It's simply a browser thing with IE.
Anyways, the solution is to use the style definition
"white-space:nowrap;" for the inner text.
Adding that to my stylesheet made it transparent and fixes the IE
problem without sacraficing Firefox/Opera operation, although I haven't
checked any of the other browsers...
> > I got around the problem you describe by applying a style to
> > <h:outputText/>; e.g., <h:outputText
> > styleClass="popup">Description of the security role.</h:outputText>
> >
> > .popup {
> > height: 5em;
> > width: 35em;
> > }
>
> That's assuming you know what width to use. In place of the text
> "Description of the security role.", I actually use a tag to pull the
> value from the message bundle for internationalization issues.
>
> The messages I've been setting up include <br /> and other tags as
> necessary for the contents to be descriptive and useful. Firefox &
> Opera handle this gracefully, and I'd like the same for IE
> w/o resorting
> to hard coded values if possible...
_________________________
CONFIDENTIALITY NOTICE
The information contained in this e-mail message is intended only for the
exclusive use of the individual or entity named above and may contain
information that is privileged, confidential or exempt from disclosure
under applicable law. If the reader of this message is not the intended
recipient, or the employee or agent responsible for delivery of the
message to the intended recipient, you are hereby notified that any
dissemination, distribution or copying of this communication is strictly
prohibited. If you have received this communication in error, please
notify the sender immediately by e-mail and delete the material from any
computer. Thank you.
RE: display issues w/ IE... (SOLVED)
Posted by "Nebinger, David" <dn...@tbbgl.com>.
It's really nothing to do with MyFaces, Tomahawk, or even JSF for that
matter.
It's simply a browser thing with IE.
Anyways, the solution is to use the style definition
"white-space:nowrap;" for the inner text.
Adding that to my stylesheet made it transparent and fixes the IE
problem without sacraficing Firefox/Opera operation, although I haven't
checked any of the other browsers...
> > I got around the problem you describe by applying a style to
> > <h:outputText/>; e.g., <h:outputText
> > styleClass="popup">Description of the security role.</h:outputText>
> >
> > .popup {
> > height: 5em;
> > width: 35em;
> > }
>
> That's assuming you know what width to use. In place of the text
> "Description of the security role.", I actually use a tag to pull the
> value from the message bundle for internationalization issues.
>
> The messages I've been setting up include <br /> and other tags as
> necessary for the contents to be descriptive and useful. Firefox &
> Opera handle this gracefully, and I'd like the same for IE
> w/o resorting
> to hard coded values if possible...
RE: display issues w/ IE...
Posted by er...@novartis.com.
Good point. I've not been able to figure this out, and my popups
definitely suffer from it--fixed dimensions don't look so good. Perhaps
there is a way to make the popup size dynamic through CSS. In any case,
you might want to open a bug about it and/or post it to the developer's
group so maybe someone can work on getting the generated code to be
different if the browser is IE.
"Nebinger, David" <dn...@tbbgl.com>
04/25/2007 02:04 PM
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
Subject
RE: <t:tooltip> display issues w/ IE...
> From: eric.jung@novartis.com [mailto:eric.jung@novartis.com]
> Sent: Wednesday, April 25, 2007 1:48 PM
>
> David,
>
> I got around the problem you describe by applying a style to
> <h:outputText/>; e.g., <h:outputText
> styleClass="popup">Description of the security role.</h:outputText>
>
> .popup {
> height: 5em;
> width: 35em;
> }
That's assuming you know what width to use. In place of the text
"Description of the security role.", I actually use a tag to pull the
value from the message bundle for internationalization issues.
The messages I've been setting up include <br /> and other tags as
necessary for the contents to be descriptive and useful. Firefox &
Opera handle this gracefully, and I'd like the same for IE w/o resorting
to hard coded values if possible...
_________________________
CONFIDENTIALITY NOTICE
The information contained in this e-mail message is intended only for the
exclusive use of the individual or entity named above and may contain
information that is privileged, confidential or exempt from disclosure
under applicable law. If the reader of this message is not the intended
recipient, or the employee or agent responsible for delivery of the
message to the intended recipient, you are hereby notified that any
dissemination, distribution or copying of this communication is strictly
prohibited. If you have received this communication in error, please
notify the sender immediately by e-mail and delete the material from any
computer. Thank you.
RE: display issues w/ IE...
Posted by "Nebinger, David" <dn...@tbbgl.com>.
> From: eric.jung@novartis.com [mailto:eric.jung@novartis.com]
> Sent: Wednesday, April 25, 2007 1:48 PM
>
> David,
>
> I got around the problem you describe by applying a style to
> <h:outputText/>; e.g., <h:outputText
> styleClass="popup">Description of the security role.</h:outputText>
>
> .popup {
> height: 5em;
> width: 35em;
> }
That's assuming you know what width to use. In place of the text
"Description of the security role.", I actually use a tag to pull the
value from the message bundle for internationalization issues.
The messages I've been setting up include <br /> and other tags as
necessary for the contents to be descriptive and useful. Firefox &
Opera handle this gracefully, and I'd like the same for IE w/o resorting
to hard coded values if possible...
Re: display issues w/ IE...
Posted by er...@novartis.com.
David,
I got around the problem you describe by applying a style to
<h:outputText/>; e.g.,
<h:outputText styleClass="popup">Description of the security
role.</h:outputText>
.popup {
height: 5em;
width: 35em;
}
"Nebinger, David" <dn...@tbbgl.com>
04/25/2007 01:36 PM
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
Subject
<t:tooltip> display issues w/ IE...
I'm using <t:popup> to display some popup help (nothing fancy). In
firefox and opera, the popup appears with all words on a single line
(just as I'd expect).
However, under IE, each word is on it's own line. Generated HTML
(copied below) for each of the browsers are exactly the same, use the
same stylesheet defn, so I don't understand why IE is different (isn't
the JSPopup.js supposed to resolve IE-related issues like this?).
Any info that would help me resolve this issue would be greatly
appreciated!
On tomahawk 1.1.3, I'm using <t:popup> as follows:
<t:popup styleClass="portal-tool-tip" displayAtDistanceX="20">
<h:graphicImage url="/images/help.gif" />
<f:facet name="popup">
<h:outputText>Description of the security
role.</h:outputText>
</f:facet>
</t:popup>
My style class is defined as:
.portal-tool-tip {
background-color: #FFFFCC;
border: 1px solid #000000;
padding: 2px;
font-size: <%= fontS %>;
}
There are no other overrides or anything like that. The generated
source from Firefox (slightly reformatted) is:
<script type="text/javascript"><!--
var
_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ftbb
glportletsecurity_5FPopup=
new
orgApacheMyfacesPopup('_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_
tbbglportletsecurity_',20,-5);
//--></script>
<img src="/tbbgl-portlet-security/images/help.gif"
onmouseover="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.display(event);"
onmouseout="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.hide(event);" />
<div style="position:absolute;display:none;" class="portal-tool-tip"
id="_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_tbbglportletsecurit
y_"
onmouseover="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F50
4_5FWAR_5Ftbbglportletsecurity_5FPopup.redisplay();"
onmouseout="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504
_5FWAR_5Ftbbglportletsecurity_5FPopup.hide();">Description of the
security role.</div>
The generated source for IE (similarly reformatted) is:
<script type="text/javascript"><!--
var
_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ftbb
glportletsecurity_5FPopup=
new
orgApacheMyfacesPopup('_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_
tbbglportletsecurity_',20,-5);
//--></script>
<img src="/tbbgl-portlet-security/images/help.gif"
onmouseover="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.display(event);"
onmouseout="/* generated code
*/_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504_5FWAR_5Ft
bbglportletsecurity_5FPopup.hide(event);" />
<div style="position:absolute;display:none;" class="portal-tool-tip"
id="_id1_504_WAR_tbbglportletsecurity_:_id23_504_WAR_tbbglportletsecurit
y_"
onmouseover="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F50
4_5FWAR_5Ftbbglportletsecurity_5FPopup.redisplay();"
onmouseout="_5Fid1_5F504_5FWAR_5Ftbbglportletsecurity_5F_3A_5Fid23_5F504
_5FWAR_5Ftbbglportletsecurity_5FPopup.hide();">Description of the
security role.</div>
_________________________
CONFIDENTIALITY NOTICE
The information contained in this e-mail message is intended only for the
exclusive use of the individual or entity named above and may contain
information that is privileged, confidential or exempt from disclosure
under applicable law. If the reader of this message is not the intended
recipient, or the employee or agent responsible for delivery of the
message to the intended recipient, you are hereby notified that any
dissemination, distribution or copying of this communication is strictly
prohibited. If you have received this communication in error, please
notify the sender immediately by e-mail and delete the material from any
computer. Thank you.