Chart legends over menus

UI Components for JSF
Post Reply
pfroy
Posts: 38
Joined: 09 Sep 2015, 18:20

05 Sep 2019, 02:34

Hi,

Is it normal that the chart legends are always over the menu? I tried to play with the z-index of the legend to no avail. Can you help with this?

Code: Select all

            table.jqplot-table-legend {
                background-color: #ffffff;
                color: #666666;
                border-color: #eaeaea;
                z-index: -10;
            }
https://www.dropbox.com/s/7cxzt7mrjuf7b ... x.png?dl=0

Thank you!
Pierre Francis
Primefaces 7.0
JSF 2.3
Java EE 8
Payara 5.184

kukeltje
Expert Member
Posts: 9396
Joined: 17 Jun 2010, 13:34
Location: Netherlands

06 Sep 2019, 11:20

I would say it is not. Is this reproducable in a theme demo? If so, which one? And in others?
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

kukeltje
Expert Member
Posts: 9396
Joined: 17 Jun 2010, 13:34
Location: Netherlands

06 Sep 2019, 11:27

Does not happen in the latest firefox in the babylon theme demo. And since all charts are in a div, the legend cannot have a higher z-index than the div it is in. So what are you running?
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

pfroy
Posts: 38
Joined: 09 Sep 2015, 18:20

13 Sep 2019, 16:43

Hello Ronald,

I'm running Roma layout 2.0.1 on the latest Google Chrome. I also tried in Microsoft Edge and I still have the same issue. Every legends I have in my graphs, they show on top of everything else.

Here's a second snapshot:
https://www.dropbox.com/s/udw1e17re5375 ... 2.png?dl=0

With the code for this page:

Code: Select all

<ui:composition 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:p="http://primefaces.org/ui"
                template="/WEB-INF/roma-layout/template.xhtml"
                xmlns:a="http://java.sun.com/jsf/composite/allaxis">

    <ui:define name="title">#{msg['menu.dashboard']}</ui:define>

    <ui:define name="head">
        <script type="text/javascript">
            function skinBar() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#FF0000', '#e2841a'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#61b5a1',
                    gridLineColor: '#eaeaea',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    drawBorder: false,
                    borderWidth: 0.1,
                    borderColor: 'eaeaea',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    rendererOptions: {
                        textColor: '#a6a6a6'
                    },
                    tickOptions: {
                        fontSize: '11pt'
                    },
                    labelOptions: {
                        fontSize: '13pt'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    renderer: $.jqplot.BarRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }
        </script>
        <style type="text/css">
            .jqplot-xaxis-label, .jqplot-yaxis-label, .jqplot-y2axis-label, .jqplot-x2axis-label {
                color: #757575; 
            }

            table.jqplot-table-legend {
                background-color: #ffffff;
                color: #666666;
                border-color: #eaeaea;
                font-size: 18px;
            }
        </style>
    </ui:define>

    <ui:define name="content">

        <div class="p-grid ui-fluid">
            <div class="p-col-12">
                <div class="card card-w-title">

                    <h:form id="DashboardForm">

                        <p:toolbar>
                            <f:facet name="left">
                                <h:outputLink id="overlay" style="color: black; font-size: 20px; font-weight: 500;" value="#" disabled="true">
                                    <i class="#{ico.fault}"></i>
                                    <h:outputText value="Nonconformities" style="margin: 0px 6px;"/>
                                </h:outputLink>
                                <h:outputText value="Dashboard"/>
                            </f:facet>
                        </p:toolbar>

                        <p:toolbar>
                            <f:facet name="left">
                                <p:selectOneButton id="filterPeriod" value="WEEKLY" unselectable="false">
                                    <f:selectItem itemLabel="Weekly" itemValue="WEEKLY"/>
                                </p:selectOneButton>
                                <p:commandButton id="refreshButton" value="#{msg.Refresh}" title="#{msg.Refresh}" icon="fa fa-refresh" styleClass="secondary-button" style="width: 100px"/>
                            </f:facet>
                        </p:toolbar>

                        <br/>
                        <br/>

                        <p:chart id="nonconformities" 
                                 type="bar" 
                                 model="#{faultDashboardController.barModel}" 
                                 style="width: 100%; height: 600px;"
                                 responsive="true"/>

                        <br/>
                        <br/>

                    </h:form>

                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>
Primefaces 7.0
JSF 2.3
Java EE 8
Payara 5.184

kukeltje
Expert Member
Posts: 9396
Joined: 17 Jun 2010, 13:34
Location: Netherlands

15 Sep 2019, 20:31

Then see if you can reproduce in the online Roma demo and if so, compare with another theme and if it does not happen there, post in the roma forum or file an issue in the issue list.
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 6 guests