Horizontal Tree

[roabol]

I'm using version 10.0.4 with the Barcelona theme. The HorizontalTree component displays this line when I hover over it. Is it a problem with the new version?

[siris]

Hi,

I couldn't find your issue at our demo page:
https://www.primefaces.org/barcelona/tree.xhtml
How can i reproduce your issue?

Best Regards,

[roabol]

Hi siris,

When I don't use selectionMode = "single", it's working normal. But when I enable this option, the error happens.

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">


    <div class="p-grid">
        <div class="p-col-12">
            <div class="card">

                <p:tree dynamic="true"
                        id="tree-node"
                        orientation="horizontal"
                        selectionMode="single" 
                        value="#{menuView.root}"
                        var="doc">

                    <p:ajax event="select" listener="#{menuView.onNodeSelect}"  />

                    <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder">
                        <h:outputText value="#{doc.texto}" title="#{doc.ordemMenu}" />
                    </p:treeNode>
                </p:tree>
            </div>
        </div>
    </div>

</ui:composition>

[siris]

Hi,

This is a general decision affecting all prime ui libraries. Maybe you can override hover class if you don't want to use with a visible line. Please try below code.

Code: Select all

body .ui-tree.ui-tree-horizontal .ui-treenode-content.ui-state-hover {
	background: #ffffff;
}

Best Regards,

[roabol]

Thanks Siris, I managed to solve my problem with the code you gave me. Despite being a decision that affects every prime library, this did not happen in the previous version of barcelona/primefaces. Anyway I appreciate your help. I'll post the definitive code if it helps anyone else.

Code: Select all

body .ui-tree.ui-tree-horizontal .ui-treenode-content.ui-state-hover {
    background: #ffffff;
}

body .ui-tree.ui-tree-horizontal .ui-treenode-content.ui-state-highlight {
    background: #a9a9a9;
    color: #000000
}

[siris]

You are welcome!

Best Regards,