-
1. Re: How can I make horizontal scroll for rich:tree?
I created styleClasses and applied them to rich:tree and rich:panel .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
</h:head>
<h:body >
<h:outputStylesheet>
.scroll{
vertical-align: top;
width:200px;
overflow:auto;
height:400px;
}
.scroll2{
vertical-align: top;
width:200px;
overflow-x:auto;
height:400px;
}
.top2{
vertical-align: top;
width: 50%;
}
.bold{
font-weight: bold;
}
</h:outputStylesheet>
<h:panelGrid columns="2" columnClasses="top2,top2" >
<rich:panel styleClass="scroll">
<h:form>
<rich:tree id="tree" nodeType="#{node.type}" var="node"
value="#{treeBean.rootNodes}" toggleType="client"
selectionType="ajax" styleClass="scroll2"
selectionChangeListener="#{treeBean.selectionChanged}">
<rich:treeNode type="country">
#{node.name}
</rich:treeNode>
<rich:treeNode type="company" icon="/images/tree/disc.gif">
#{node.name}
</rich:treeNode>
<rich:treeNode type="cd" icon="/images/tree/song.gif">
#{node.artist} - #{node.name} - #{node.year}
</rich:treeNode>
</rich:tree>
</h:form>
</rich:panel>
<a4j:outputPanel ajaxRendered="true" layout="block">
<rich:panel header="Current Selection"
rendered="#{not empty treeBean.currentSelection}">
<h:outputText value="Name:" />
<h:outputText value="#{treeBean.currentSelection.name}" />
<h:panelGroup rendered="#{treeBean.currentSelection.leaf}">
<fieldset><legend>Details</legend> <h:panelGrid columnClasses="bold"
columns="2">
<h:outputText value="Country:" />
<h:outputText value="#{treeBean.currentSelection.company.country}" />
<h:outputText value="Company:" />
<h:outputText value="#{treeBean.currentSelection.company}" />
<h:outputText value="Artist:" />
<h:outputText value="#{treeBean.currentSelection.artist}" />
<h:outputText value="Price:" />
<h:outputText value="#{treeBean.currentSelection.price}">
<f:convertNumber type="currency" currencyCode="USD"/>
</h:outputText>
<h:outputText value="Year:" />
<h:outputText value="#{treeBean.currentSelection.year}" />
</h:panelGrid></fieldset>
</h:panelGroup>
</rich:panel>
</a4j:outputPanel>
</h:panelGrid>
</h:body>
</html>