[Trinidad] tr:selectManyListbox doesn't render on IE

View: New views
4 Messages — Rating Filter:   Alert me  

[Trinidad] tr:selectManyListbox doesn't render on IE

by Shane Petroff :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hello,

I have a relatively simple page which behaves fine under Firefox, but
oddly under IE. In IE the tr:selectManyListbox is not rendered until
after the first ajax request. But the ajax request has nothing to do
with the tr:selectManyListbox. The page below is opened in a light
weight dialog, and I'm using Trinidad 1.0.7, Tomahawk 1.1.5 and MyFaces
core 1.1.5. What could be causing it to behave in this manner?

Also, how do I get rid of the hideous rollovers on tree nodes in IE?
I've defined my own skin so that I can place icons with nodes, but I
haven't changed anything else.


<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page language="java" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<f:loadBundle basename="ui" var="bundle"/>

<f:view>
<tr:document title="#{bundle.SelectComment}">

  <head>
      <jsp:include page="boilerPlate.jsp"/>
  </head>

  <h:form>
    <body>
    <t:saveState id="sectionId" value="#{commentLibraryBean.sectionId}"/>
    <t:saveState id="capIdx" value="#{commentLibraryBean.capIdx}"/>
    <t:saveState id="capType" value="#{commentLibraryBean.capType}"/>

    <tr:panelFormLayout styleClass="panel">

        <tr:outputText value="#{bundle.SchoolComment}"
styleClass="textField"/>
        <tr:selectManyListbox id="schoolCommentLibraryList"
                              size="3"
                             
binding="#{commentLibraryBean.schoolCommentList}"
                              contentStyle="width:100%"
                              styleClass="listBox">
            <f:selectItems value="#{commentLibraryBean.schoolComments}"/>
            <f:validateLength minimum="0"
maximum="#{commentLibraryBean.maxCommentLength}"/>
        </tr:selectManyListbox>

        <tr:outputText value="#{bundle.UserComment}"
styleClass="textField"/>

        <tr:panelBorderLayout styleClass="tree"
                              inlineStyle="height:180px; overflow:auto;
position:relative;" >
            <tr:tree var="node"
                     value="#{commentLibraryBean.treeModel}"
                     binding="#{commentLibraryBean.userCommentTree}"
                     initiallyExpanded="true">
              <f:facet name="nodeStamp">
                  <tr:commandLink styleClass="treeLink"
                                 
actionListener="#{commentLibraryBean.selectComment}"
                                  text="#{node.desc}"
                                  shortDesc="#{node.commentId}"
                                  partialSubmit="true">
                  </tr:commandLink>
              </f:facet>
            </tr:tree>
        </tr:panelBorderLayout >

        <tr:inputText value="#{commentLibraryBean.selectedComment.comment}"
                      id="commentTextField"
                      contentStyle="width:100%"
                      disabled="true"
                      rows="3">
            <f:validateLength minimum="0"
maximum="#{commentLibraryBean.maxCommentLength}"/>
        </tr:inputText>

        <tr:panelGroupLayout layout="horizontal" styleClass="panel">
            <h:commandButton
action="#{commentLibraryBean.insertFromCommentLibrary}"
                             
value="#{bundle.CommentLibraryInsertButtonText}" styleClass="button"/>
            <h:commandButton
action="#{commentLibraryBean.cancelCommentLibrary}"
                             value="#{bundle.Cancel}" immediate="true"
styleClass="button"/>
            <tr:statusIndicator>
                <f:facet name="busy">
                    <tr:outputText value="#{bundle.Loading}"/>
                </f:facet>
            </tr:statusIndicator>

        </tr:panelGroupLayout>

    </tr:panelFormLayout>

    <h:inputHidden binding="#{commentLibraryBean.hiddenCommentIdField}">
        <f:validateLongRange minimum="0"
maximum="#{commentLibraryBean.maxInt}"/>
    </h:inputHidden>

    </body>
  </h:form>
  </tr:document>
</f:view>


--
Shane




RE: [Trinidad] tr:selectManyListbox doesn't render on IE

by Mathias Walter :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hi Shane,

it sound's related to https://issues.apache.org/jira/browse/TRINIDAD-1071.

I'll investigate the problem this week and may provide a patch.

--
Kind regards,
Mathias

> -----Original Message-----
> From: Shane Petroff [mailto:shane@...]
> Sent: Tuesday, May 13, 2008 10:47 PM
> To: MyFaces Discussion
> Subject: [Trinidad] tr:selectManyListbox doesn't render on IE
>
>
> Hello,
>
> I have a relatively simple page which behaves fine under Firefox, but
> oddly under IE. In IE the tr:selectManyListbox is not rendered until
> after the first ajax request. But the ajax request has nothing to do
> with the tr:selectManyListbox. The page below is opened in a light
> weight dialog, and I'm using Trinidad 1.0.7, Tomahawk 1.1.5
> and MyFaces
> core 1.1.5. What could be causing it to behave in this manner?
>
> Also, how do I get rid of the hideous rollovers on tree nodes in IE?
> I've defined my own skin so that I can place icons with nodes, but I
> haven't changed anything else.
>
>
> <%@ page contentType="text/html;charset=UTF-8"%>
> <%@ page language="java" %>
> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
> <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
> <%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr" %>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <f:loadBundle basename="ui" var="bundle"/>
>
> <f:view>
> <tr:document title="#{bundle.SelectComment}">
>
>   <head>
>       <jsp:include page="boilerPlate.jsp"/>
>   </head>
>
>   <h:form>
>     <body>
>     <t:saveState id="sectionId"
> value="#{commentLibraryBean.sectionId}"/>
>     <t:saveState id="capIdx" value="#{commentLibraryBean.capIdx}"/>
>     <t:saveState id="capType" value="#{commentLibraryBean.capType}"/>
>
>     <tr:panelFormLayout styleClass="panel">
>
>         <tr:outputText value="#{bundle.SchoolComment}"
> styleClass="textField"/>
>         <tr:selectManyListbox id="schoolCommentLibraryList"
>                               size="3"
>                              
> binding="#{commentLibraryBean.schoolCommentList}"
>                               contentStyle="width:100%"
>                               styleClass="listBox">
>             <f:selectItems
> value="#{commentLibraryBean.schoolComments}"/>
>             <f:validateLength minimum="0"
> maximum="#{commentLibraryBean.maxCommentLength}"/>
>         </tr:selectManyListbox>
>
>         <tr:outputText value="#{bundle.UserComment}"
> styleClass="textField"/>
>
>         <tr:panelBorderLayout styleClass="tree"
>                               inlineStyle="height:180px;
> overflow:auto;
> position:relative;" >
>             <tr:tree var="node"
>                      value="#{commentLibraryBean.treeModel}"
>                      binding="#{commentLibraryBean.userCommentTree}"
>                      initiallyExpanded="true">
>               <f:facet name="nodeStamp">
>                   <tr:commandLink styleClass="treeLink"
>                                  
> actionListener="#{commentLibraryBean.selectComment}"
>                                   text="#{node.desc}"
>                                   shortDesc="#{node.commentId}"
>                                   partialSubmit="true">
>                   </tr:commandLink>
>               </f:facet>
>             </tr:tree>
>         </tr:panelBorderLayout >
>
>         <tr:inputText
> value="#{commentLibraryBean.selectedComment.comment}"
>                       id="commentTextField"
>                       contentStyle="width:100%"
>                       disabled="true"
>                       rows="3">
>             <f:validateLength minimum="0"
> maximum="#{commentLibraryBean.maxCommentLength}"/>
>         </tr:inputText>
>
>         <tr:panelGroupLayout layout="horizontal" styleClass="panel">
>             <h:commandButton
> action="#{commentLibraryBean.insertFromCommentLibrary}"
>                              
> value="#{bundle.CommentLibraryInsertButtonText}" styleClass="button"/>
>             <h:commandButton
> action="#{commentLibraryBean.cancelCommentLibrary}"
>                              value="#{bundle.Cancel}"
> immediate="true"
> styleClass="button"/>
>             <tr:statusIndicator>
>                 <f:facet name="busy">
>                     <tr:outputText value="#{bundle.Loading}"/>
>                 </f:facet>
>             </tr:statusIndicator>
>
>         </tr:panelGroupLayout>
>
>     </tr:panelFormLayout>
>
>     <h:inputHidden
> binding="#{commentLibraryBean.hiddenCommentIdField}">
>         <f:validateLongRange minimum="0"
> maximum="#{commentLibraryBean.maxInt}"/>
>     </h:inputHidden>
>
>     </body>
>   </h:form>
>   </tr:document>
> </f:view>
>
>
> --
> Shane
>
>


Re: [Trinidad] tr:selectManyListbox doesn't render on IE

by Shane Petroff :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Mathias Walter wrote:
it sound's related to https://issues.apache.org/jira/browse/TRINIDAD-1071.
I'll investigate the problem this week and may provide a patch.
  

That sounds great, thanks.

Any takers on the rollover thing?

The default skin does not seem to have any rollover effects on IE (assuming that this is what's used for the demo at irian). Yet my custom skin merely extends the default        

        <extends>
            simple.desktop
        </extends>

and only overrides node-icon properties for tree and treeTable:

af|tree::node-icon:folder-expanded{...
af|tree::node-icon:folder-collapsed{...
af|tree::node-icon:document{...

Where the heck are these properties coming from, and why only on IE?


Shane
--
Kind regards,
Mathias

  
-----Original Message-----
From: Shane Petroff [shane@...] 
Sent: Tuesday, May 13, 2008 10:47 PM
To: MyFaces Discussion
Subject: [Trinidad] tr:selectManyListbox doesn't render on IE


Hello,

I have a relatively simple page which behaves fine under Firefox, but 
oddly under IE. In IE the tr:selectManyListbox is not rendered until 
after the first ajax request. But the ajax request has nothing to do 
with the tr:selectManyListbox. The page below is opened in a light 
weight dialog, and I'm using Trinidad 1.0.7, Tomahawk 1.1.5 
and MyFaces 
core 1.1.5. What could be causing it to behave in this manner?

Also, how do I get rid of the hideous rollovers on tree nodes in IE? 
I've defined my own skin so that I can place icons with nodes, but I 
haven't changed anything else.


<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page language="java" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<f:loadBundle basename="ui" var="bundle"/>

<f:view>
<tr:document title="#{bundle.SelectComment}">

  <head>
      <jsp:include page="boilerPlate.jsp"/>
  </head>

  <h:form>
    <body>
    <t:saveState id="sectionId" 
value="#{commentLibraryBean.sectionId}"/>
    <t:saveState id="capIdx" value="#{commentLibraryBean.capIdx}"/>
    <t:saveState id="capType" value="#{commentLibraryBean.capType}"/>

    <tr:panelFormLayout styleClass="panel">

        <tr:outputText value="#{bundle.SchoolComment}" 
styleClass="textField"/>
        <tr:selectManyListbox id="schoolCommentLibraryList"
                              size="3"
                              
binding="#{commentLibraryBean.schoolCommentList}"
                              contentStyle="width:100%"
                              styleClass="listBox">
            <f:selectItems 
value="#{commentLibraryBean.schoolComments}"/>
            <f:validateLength minimum="0" 
maximum="#{commentLibraryBean.maxCommentLength}"/>
        </tr:selectManyListbox>

        <tr:outputText value="#{bundle.UserComment}" 
styleClass="textField"/>

        <tr:panelBorderLayout styleClass="tree"
                              inlineStyle="height:180px; 
overflow:auto; 
position:relative;" >
            <tr:tree var="node"
                     value="#{commentLibraryBean.treeModel}"
                     binding="#{commentLibraryBean.userCommentTree}"
                     initiallyExpanded="true">
              <f:facet name="nodeStamp">
                  <tr:commandLink styleClass="treeLink"
                                  
actionListener="#{commentLibraryBean.selectComment}"
                                  text="#{node.desc}"
                                  shortDesc="#{node.commentId}"
                                  partialSubmit="true">
                  </tr:commandLink>
              </f:facet>
            </tr:tree>
        </tr:panelBorderLayout >

        <tr:inputText 
value="#{commentLibraryBean.selectedComment.comment}"
                      id="commentTextField"
                      contentStyle="width:100%"
                      disabled="true"
                      rows="3">
            <f:validateLength minimum="0" 
maximum="#{commentLibraryBean.maxCommentLength}"/>
        </tr:inputText>

        <tr:panelGroupLayout layout="horizontal" styleClass="panel">
            <h:commandButton 
action="#{commentLibraryBean.insertFromCommentLibrary}"
                             
value="#{bundle.CommentLibraryInsertButtonText}" styleClass="button"/>
            <h:commandButton 
action="#{commentLibraryBean.cancelCommentLibrary}"
                             value="#{bundle.Cancel}" 
immediate="true" 
styleClass="button"/>
            <tr:statusIndicator>
                <f:facet name="busy">
                    <tr:outputText value="#{bundle.Loading}"/>
                </f:facet>
            </tr:statusIndicator>

        </tr:panelGroupLayout>

    </tr:panelFormLayout>

    <h:inputHidden 
binding="#{commentLibraryBean.hiddenCommentIdField}">
        <f:validateLongRange minimum="0" 
maximum="#{commentLibraryBean.maxInt}"/>
    </h:inputHidden>

    </body>
  </h:form>
  </tr:document>
</f:view>


-- 
Shane


    


  


-- 
Shane

Parent Message unknown RE: [Trinidad] tr:selectManyListbox doesn't render on IE

by Stephen Friedrich-4 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Thanks Mathias.
I noticed the same problem after switching from heavyweight to lighweight dialogs (on IE 6 only, other browser were fine).
A workaround for me was to set the select's position to relative _after_ the document was loaded:

            $(function() {$('select').css("position", "relative")});
(using jQuery)
Maybe that helps hunting down the bug.



Hi Shane,

it sound's related to https://issues.apache.org/jira/browse/TRINIDAD-1071.

I'll investigate the problem this week and may provide a patch.

--
Kind regards,
Mathias

> -----Original Message-----
> From: Shane Petroff [mailto:shane@...]
> Sent: Tuesday, May 13, 2008 10:47 PM
> To: MyFaces Discussion
> Subject: [Trinidad] tr:selectManyListbox doesn't render on IE
>
>
> Hello,
>
> I have a relatively simple page which behaves fine under Firefox, but
> oddly under IE. In IE the tr:selectManyListbox is not rendered until
> after the first ajax request. But the ajax request has nothing to do
> with the tr:selectManyListbox. The page below is opened in a light
> weight dialog, and I'm using Trinidad 1.0.7, Tomahawk 1.1.5
> and MyFaces
> core 1.1.5. What could be causing it to behave in this manner?
>
> Also, how do I get rid of the hideous rollovers on tree nodes in IE?
> I've defined my own skin so that I can place icons with nodes, but I
> haven't changed anything else.
>
>
> <%@ page contentType="text/html;charset=UTF-8"%>
> <%@ page language="java" %>
> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
> <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
> <%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr" %>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <f:loadBundle basename="ui" var="bundle"/>
>
> <f:view>
> <tr:document title="#{bundle.SelectComment}">
>
>   <head>
>       <jsp:include page="boilerPlate.jsp"/>
>   </head>
>
>   <h:form>
>     <body>
>     <t:saveState id="sectionId"
> value="#{commentLibraryBean.sectionId}"/>
>     <t:saveState id="capIdx" value="#{commentLibraryBean.capIdx}"/>
>     <t:saveState id="capType" value="#{commentLibraryBean.capType}"/>
>
>     <tr:panelFormLayout styleClass="panel">
>
>         <tr:outputText value="#{bundle.SchoolComment}"
> styleClass="textField"/>
>         <tr:selectManyListbox id="schoolCommentLibraryList"
>                               size="3"
>                              
> binding="#{commentLibraryBean.schoolCommentList}"
>                               contentStyle="width:100%"
>                               styleClass="listBox">
>             <f:selectItems
> value="#{commentLibraryBean.schoolComments}"/>
>             <f:validateLength minimum="0"
> maximum="#{commentLibraryBean.maxCommentLength}"/>
>         </tr:selectManyListbox>
>
>         <tr:outputText value="#{bundle.UserComment}"
> styleClass="textField"/>
>
>         <tr:panelBorderLayout styleClass="tree"
>                               inlineStyle="height:180px;
> overflow:auto;
> position:relative;" >
>             <tr:tree var="node"
>                      value="#{commentLibraryBean.treeModel}"
>                      binding="#{commentLibraryBean.userCommentTree}"
>                      initiallyExpanded="true">
>               <f:facet name="nodeStamp">
>                   <tr:commandLink styleClass="treeLink"
>                                  
> actionListener="#{commentLibraryBean.selectComment}"
>                                   text="#{node.desc}"
>                                   shortDesc="#{node.commentId}"
>                                   partialSubmit="true">
>                   </tr:commandLink>
>               </f:facet>
>             </tr:tree>
>         </tr:panelBorderLayout >
>
>         <tr:inputText
> value="#{commentLibraryBean.selectedComment.comment}"
>                       id="commentTextField"
>                       contentStyle="width:100%"
>                       disabled="true"
>                       rows="3">
>             <f:validateLength minimum="0"
> maximum="#{commentLibraryBean.maxCommentLength}"/>
>         </tr:inputText>
>
>         <tr:panelGroupLayout layout="horizontal" styleClass="panel">
>             <h:commandButton
> action="#{commentLibraryBean.insertFromCommentLibrary}"
>                              
> value="#{bundle.CommentLibraryInsertButtonText}" styleClass="button"/>
>             <h:commandButton
> action="#{commentLibraryBean.cancelCommentLibrary}"
>                              value="#{bundle.Cancel}"
> immediate="true"
> styleClass="button"/>
>             <tr:statusIndicator>
>                 <f:facet name="busy">
>                     <tr:outputText value="#{bundle.Loading}"/>
>                 </f:facet>
>             </tr:statusIndicator>
>
>         </tr:panelGroupLayout>
>
>     </tr:panelFormLayout>
>
>     <h:inputHidden
> binding="#{commentLibraryBean.hiddenCommentIdField}">
>         <f:validateLongRange minimum="0"
> maximum="#{commentLibraryBean.maxInt}"/>
>     </h:inputHidden>
>
>     </body>
>   </h:form>
>   </tr:document>
> </f:view>
>
>
> --
> Shane
>
>