Question

我正在使用PrimeFaces的颜色选择器（弹出版本）。但是，当我点击图标以显示颜色选择器时，它会显示在我的所有其他内容之下（在提交按钮下方，而不是像它应该做的那样在图标下方）。我试过删除我的CSS并移动一切无济于事。颜色选择器位于<h:form>，<div>和<h:panelGrid>。

<!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:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Index</title>
<h:outputStylesheet name="css/styles.css" />
</h:head>
<h:body>
    <div class="title"> <h1> Testing </h1> </div>
<br />

<h:form>
<div class="forms">
<h:messages />
<h:panelGrid columns="2" columnClasses="column1Class column2Class" cellpadding="10">
    <h:outputText value="Test1 " />
    <h:inputText value="#{userConfig.test1}" />

    <h:outputText value="ColorInline1 " />
    <p:colorPicker value="#{userConfig.colorInline1}" mode="inline"/> 

    <h:outputText value="ColorInline2: " />
    <p:colorPicker value="#{userConfig.colorInline2}" mode="inline"/> 

    <h:outputText value="ColorPopup " />
    <p:colorPicker value="#{userConfig.colorPopup}" />

    <h:outputText value="Test2" />
    <h:inputText value="#{userConfig.test2}" />

</h:panelGrid>
    <br />
    <p:commandButton action="newValsIndex" value="Submit" ajax="false">   </p:commandButton>
</div>
</h:form>
</h:body>
</html>

Answer 1

我能够轻松地重现您的问题，实际上，在showcase中，它正常运行。主要区别在于您的组件较少。在空白页面中单独测试他们的代码生成这些css / javascript包括：

<link href="/javax.faces.resource/theme.css.jspx?ln=primefaces-aristo" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/primefaces.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/colorpicker/colorpicker.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<script src="/javax.faces.resource/jquery/jquery.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/primefaces.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/colorpicker/colorpicker.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/jquery/jquery-plugins.js.jspx?ln=primefaces" type="text/javascript">

只要清理示例并仅保留p:colorPicker，就会丢失最后一个。这看起来像PrimeFaces错误，您可以通过在h:head中添加此行来解决问题：

<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />

PrimeFaces颜色选择器弹出窗口没有显示在正确的位置

1 个答案: