Chart legends over menus

[pfroy]

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

[kukeltje]

I would say it is not. Is this reproducable in a theme demo? If so, which one? And in others?

[kukeltje]

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?

[pfroy]

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>

[kukeltje]

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.

[pfroy]

Will do. Thanks

[pfroy]

I just reproduced the bug using the demo war (as provided with the layout). I simply deployed the war file in my app server and bingo.

Here is the result:

https://www.dropbox.com/s/myd1nkufeikar ... p.png?dl=0

I tried with Balybon and the bug is not present.

https://www.dropbox.com/s/oft2sq9a7u5ux ... d.png?dl=0