简体   繁体   English

在IE 7中,p:accordionPanel在圈数p:menubar

[英]In IE 7 primefaces p:accordionPanel over laps p:menubar

In IE7 below code p:accordionPanel over laps p:menubar.ie., when i cick on menubar, menu items are hidden under p:accordionPanel . 在IE7下方的代码p:accordionPanel上位于p:menubar.ie上,当我单击菜单栏时,菜单项隐藏在p:accordionPanel下。 However there is no issue in Chrome and Firefox. 但是,Chrome和Firefox中没有问题。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">
        <h:head>    
        </h:head>
        <h:body>
   <h:form>         
       <p:menubar>  
            <p:submenu label="Company" >
            <p:menuitem value="Software Engineer" />
            <p:menuitem value="Manager" />  
            <p:menuitem value="Business Ananlyst"  />
            <p:menuitem value="System Analyst" />
            </p:submenu>
    </p:menubar>

        <p:accordionPanel>
            <p:tab title="Lorem Ipsum ">
                <h:panelGrid columns="3">
                    <h:outputText
                        value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"></h:outputText>
                </h:panelGrid>
            </p:tab>
        </p:accordionPanel>
    </h:form>
    </h:body>

</html>

It can solved by giving greater z-index to <p:menubar /> then <p:accordionPanel /> 可以通过给<p:menubar /> <p:accordionPanel />更大的z-index来解决

In my example changes i have done is 在我的示例中,我所做的更改是

<p:menubar style="z-index:2000">
<p:accordionPanel style="z-index:1000">

However if there are multiple components it can be solved by using jquery. 但是,如果有多个组件,则可以使用jquery解决。 The component declared first will have z-index greater then later one 首先声明的组件的z-index值大于后来的

$(document).ready(function(){
 var zIndexNumber = 1000;
        $('div').each(function() {
            $(this).css('zIndex', zIndexNumber);
            zIndexNumber -= 10;
        });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM