2

我正在使用 PrimeFaces 的颜色选择器（弹出版本）。但是，当我单击图标以调出颜色选择器时，它会显示在我所有其他内容的下方（在提交按钮下方，而不是在图标下方，就像它应该做的那样）。我试过删除我的css并移动所有东西都无济于事。颜色选择器位于 a <h:form>、 a<div>和 a<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>
4

1 回答 1

3

我能够轻松地重现您的问题，实际上，在展示中，它工作正常。主要区别在于您的组件更少。在空白页面中单独测试他们的代码会生成这些 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" />
于 2013-06-18T18:35:09.880 回答