question regarding rich:treeNode and a:support

[nayanj]

Using richfaces packaged with Seam2CR1.

I have a rich:tree with treenodes defined similar to code shown below. I have bunch of problems with the displayed tree that I can't figure how to fix. Will appreciate your help.

1. When mouse is moved over the text displayed by h:outputText, the text is underlined.. i did not specify anything like that in my css file or in the code below. How do I turn this off?

2. When mouse is clicked over the text displayed by h:outputText, the tree nodes move a bit down. If mouse clicked over text of any other node in tree again the tree nodes move a bit up this time. The cycle repeats. Seems like a bug to me. Has anyone else noted this issue?

3. My tree had just 2 levels. Near last leaf node for each internal node in the tree a wierd vertical line between the checkbox and icon to collapse tree branch. Issue occurs both with IE and Firefox. I cannot figure out any useful information like an extra image from html of rendered page. Has anyone else noted this issue? Here is an image showing what i mean: [img]http://www.weblogimages.com/v.p?uid=nayanj&pid=579581&sid=puQ23hksP3" border=0[/img]

<rich:treeNode id="myNode" type="myData" iconLeaf="img/blank.gif" nodeClass="checkbox">
 <h:selectBooleanCheckbox id="myCheckbox" value="#{ item.selected}" styleClass="checkbox">
 <a:support event="onclick" actionListener="#{item.setSelected}" RequestDelay="3"
 immediate="true" reRender="treeDiv" />
 </h:selectBooleanCheckbox>
 <h:outputText id="myText" value="#{ item.name}" styleClass="myTree" />
 </rich:treeNode>

[/url]

[nayanj]

any clues on fixing these issues?

[nayanj]

I hate to bump this up again but hey guys I need some help. I have done lot of searching but can't find any solution. Anyone recognize the problems I mentioned here?

If you look at the examples at http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf
Even they have this mouse-over effect. What does one do to turn them off?

[nayanj]

Hm.. may be these issues are too simple for gurus out here and I am not getting any response. Please enlighten users like me with an example:

http://jira.jboss.org/jira/browse/RF-1372

[nbelaevski]

1. define css rich-tree-node-highlighted class:
.rich-tree-node-highlighted {
text-decoration:none;
color:black;
}

2. what the brwoser is?
3. try to update to the latest 3.1.3-SNAPSHOT version

[nayanj]

nbelaevski, thanks for your response. your first suggestion solves problem # 1 that I mentioned.

I am testing the application in both Firefox (v 2) and Internet Explorer (v 7). Problem #2 and #3 can be reproduced in both browsers.

I am working on upgrading the application to latest jars and will update you if I still see the errors.

[nayanj]

I upgraded to latest 3.1.3-SNAPSHOT but the tree display still has same problems.

[ykravchenko]

Regarding issue #2. I have the same problem. if I got you right all nodes move down a bit, so it forces all components that are situated lower then tree move down too. You could just but tree in container with fixed height

[ykravchenko]

Richfaces tree seems to be very tricky thing, or that's just by opinion. I have recently faced problem that when I put links into tree nodes they work incorrectly, I mean they are not always pressed....

Regarding issue #3 for now I have no ideas, maybe you could send me a minimum example packed in.war file and I could try to replicate issue on my environment?

[nayanj]

Hi ykravchenko,

Can you please explain what you want me to try to fix problem #2.

Regarding issue #2. I have the same problem. if I got you right all nodes move down a bit, so it forces all components that are situated lower then tree move down too. You could just but tree in container with fixed height

I will work on an example war file and try to send it to you later today.

[nayanj]

Hi nbelaevski,

You were right, I can't reproduce problem #3 with latest version of richfaces. I must have made some mistake earlier in testing.

I have narrowed down problem #2 to the fact that it is related to styleClass defined for rich:treeNode. The nodes start moving a bit up/down if we try to specify a styleClass for treeNode element. I wanted to remove border surrounding the treeNode so, I defined my own styleClass specifying border:0px; .. that is causing this problem!! If I remove this css class the problem goes away.

Instead of specifying my own css class I also tried to define following class as suggested in documentation but that also causes problem.
.rich-tree-node-selected{
border: 0px;
}

There is one more problem I am facing with the checkbox tree, the label text is not aligned properly with the checkbox. I think this has something to do with css styles as I do not see this problem when I remove my css file itself. I did not explicitly specify any style for the label, so I am not sure how my css classes are interfering with the styles defined for rich-tree. If you can give any clue on what can cause this problem, please let me know.

[ykravchenko]

Hi nayanj,

Sorry I must have misunderstood you with problem#2

I faced the same problem when tried to make selected nodes have no border I provided 'selectedClass' tree attribute with my own styleClass ant tree nodes started dancing :)

I'll try to investigate this problem. if you find some solution please post it here

[ykravchenko]

Hi again,

If your goal was same as mine, I'll provide you with solution

Goal: Remove the border around node, when tree node is selected
Problem: When border was removed nodes started dancing when clicking on them (moving a bit up and down)

Cause of problem: When turned firebugs it seemed that the cause of problem was different padding CSS styles applied to selected and not selected nodes.

.dr-tree-i-sel {
 padding:0px 3px;
}

.dr-tree-h-text{
 padding:1px 4px;
}

Solution:
1. Define selectedClass attribute to tree

<rich:tree ... selectedClass="selected-no-border">

.selected-no-border {
 border: none;
 padding: 0px;
}

2. Define nodeClass attribute for node

<rich:treeNode nodeClass="node-no-padding" >

.node-no-padding {
 padding: 0px;
}

Now You should not face problem with dancing nodes :)
Regards Yevgen Kravchenko

[ykravchenko]

Sorry for off top, but does anyone here has knows is there Richfaces Wiki page? So we could develop knowledge base.

For example the last 2 posts could easily go to knowledge base and anyone who is new to richfaces could search it and find solution quickly.

I would like to post about multiple selection ability in <rich:tree> but I don't know where to place this material. Does anyone knows proper location?

[dmitry.demyankov]

http://labs.jboss.com/wiki/RichFaces