Scrollable Div only scrolls structure but not data

2019-05-20 21:41发布

问题:

The div scrolls the table, but the data doesn't move. It works fine in IE9 (non-compatability mode) and Firefox. A simple example is below. Anyone know of a workaround for this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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">

<h:head>
    <title>Carousel Test</title>
</h:head>

<h:body>

    <h:form id="evaluationForm">

        <div style="overflow:auto; height:200px">
            <p:dataTable value="#{evaluationBean.items}" var="item">
                <p:column headerText="ID">
                    <h:outputText value="#{item.id}" />
                </p:column>
            </p:dataTable>
        </div>

    </h:form>

</h:body>

</html>

Thanks, Neil

回答1:

Just turn off IE compatibility modus by

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    </f:facet>
    ...
</h:head>

Note that the <f:facet name="first"> is specific to PrimeFaces. So if you're not using it, just remove it and put the <meta> tag in the very top of the <h:head>, it'll work as good as well. The key point is that it has to appear before the PrimeFaces-generated <link> element pointing to the theme CSS. See also the MSDN document:

The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.

Which thus means that it won't work when appearing after for example a <link> element.