Stack component z-index does not work

UI Components for JSF
Post Reply
jiny10
Posts: 10
Joined: 25 May 2020, 20:33

22 Jun 2022, 10:44

I, tried to build my "stack" menu in one direct vertical line. According to Primefaces documentation I have to override .ui-stackt style to change this z-index. If I understood well, this z-index is responsible for the shift of each element of menu. I have tried to apply this z-index with different values, but I did not reach any visual impact, why?

This PrimeFaces Stack component page https://www.primefaces.org/showcase/ui/ ... wid=d0061

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">


<h:head>
    <h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
    <h:outputStylesheet name="primeflex/2.0.0/primeflex.min.css" library="webjars" />

    <style type="text/css">
        .ui-stack {
            z-index: 1000;
        }
    </style>

</h:head>

            <p:stack icon="/resources/images/basket.png"
                     openSpeed="600"
                     closeSpeed="600">

                <p:menuitem value="Exit"
                            action="#{loginBean.logout}"
                            icon="/resources/images/close.png"/>

                <p:menuitem value="Archive"
                            url="/luis_web/manage/archiveList.xhtml"
                            target="_blank"
                            icon="/resources/images/archive.png"/>


                <p:menuitem value="Person"
                            target="_blank"
                            url="#"
                            icon="/resources/images/users.png"/>


                <p:menuitem value="Case"
                            url="/luis_web/manage/caseList.xhtml"
                            target="_blank"
                            icon="/resources/images/cases.png"/>


                <p:menuitem value="Company"
                            url="#"
                            target="_blank"
                            icon="/resources/images/companies.png"/>

                <p:menuitem value="Schedule"
                            url="/luis_web/app/schedule.xhtml"
                            target="_blank"
                            icon="/resources/images/schedule.png"/>


                <p:menuitem value="New"
                            target="_blank"
                            url="document.xhtml?folderId=#{foldersBean.folderEntitySelected.id}"
                            icon="/resources/images/application.png"/>
            </p:stack>


        </div>

    </h:form>


</h:body>
</html>

Melloware
Posts: 3189
Joined: 22 Apr 2013, 15:48

22 Jun 2022, 19:41

Looks like it is working on the showcase? https://www.primefaces.org/showcase/ui/menu/stack.xhtml
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

jepsar
Posts: 73
Joined: 03 Sep 2014, 11:41
Location: NL / BE
Contact:

23 Jun 2022, 13:50

Z-index has nothing to do with getting the items "one direct vertical line".
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
https://developer.mozilla.org/en-US/doc ... SS/z-index

To get them to line up, use this CSS:

Code: Select all

.ui-stack ul li {
    left: 0 !important;
}
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub: https://github.com/jepsar

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 38 guests