PrimeFaces 颜色选择器弹出窗口未显示在正确的位置答案

【问题标题】：PrimeFaces color picker popup not showing up at the right placePrimeFaces 颜色选择器弹出窗口未显示在正确的位置
【发布时间】：2013-06-18 15:20:43
【问题描述】：

我正在使用 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>

【问题讨论】：

显示代码。让帮助你变得更容易。我假设它出现在 primefaces 展示中的正确位置。因此，您的代码中可能有些东西“杂乱无章”。但是没有看到它很难帮助你......
好点。我已经用代码编辑了我的帖子。

标签： jsf-2 primefaces

【解决方案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" />

【讨论】：

效果很好。现在我需要做的就是弄清楚如何更改颜色选择器的背景颜色......非常感谢！
@user2471366 您只需使用新的background: ... 重载类.ui-colorpicker-container，因为它当前正在使用图像。