- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个包含一些输入组件的模态对话框。
当在对话框中使用 p:layout 时会出现问题。 p:layoutUnit 中的 p:inputText 组件可以在第一次获得焦点,但随后它对键盘没有响应,因为没有显示输入文本,我也无法使用 tab 关键字切换到其他输入字段(我可以只用鼠标切换到另一个输入组件)。
设置 modal="false"解决了问题,但我需要一个模态对话框。
这是我的代码:
<h:form id="outerForm">
<p:commandButton id="button" value="Show dialog" onclick="dialogVar.show()" type="button" />
<p:dialog id="dialog" header="inputText inside p:layout will not work" widgetVar="dialogVar" modal="true" resizable="false" closeOnEscape="true">
<h:inputText />
<p:autoComplete />
<p:panelGrid columns="2">
<h:outputLabel value="Write something" />
<p:inputText />
<h:outputLabel value="Write something else" />
<p:inputText />
<h:outputLabel value="Text Area" />
<p:inputTextarea rows="4" cols="30" autoResize="false" />
</p:panelGrid>
<p:layout id="diffDialogLayout" style="height:400px;width:900px;">
<p:layoutUnit id="diffWestUnit" position="west" size="45%">
<p:panelGrid columns="2">
<h:outputLabel value="Write something" />
<p:inputText />
<h:outputLabel value="Write something else" />
<p:inputText />
<h:outputLabel value="Text Area" />
<p:inputTextarea rows="4" cols="30" autoResize="false" />
</p:panelGrid>
</p:layoutUnit>
<p:layoutUnit id="diffCenterUnit" position="center">
<br />
</p:layoutUnit>
</p:layout>
<h:inputText />
</p:dialog>
</h:form>
我的环境:
编辑
建议的解决方案效果很好。该问题可以通过以下 CSS 代码解决:
.ui-dialog { z-index: 1005 !important; }
.ui-layout-pane-west { z-index: 1010 !important; }
.ui-layout-pane-center { z-index: 1010 !important; }
或者,如果您只想将它用于特定对话框:
#outerForm\3A diffDialog.ui-dialog { z-index: 1005 !important; }
#outerForm\3A diffWestUnit.ui-layout-pane-west { z-index: 1010 !important; }
#outerForm\3A diffCenterUnit.ui-layout-pane-center { z-index: 1010 !important; }
\3A 字符用于与 IE 6-8 兼容,如下所述:Handling a colon in an element ID in a CSS selector .
最佳答案
我可以重现你的问题,这个问题的根源是z-index:1003
使用 modal=true
时会自动插入primefaces 中的属性 <p:dialog>
你可以使用一个小的 css hack 来解决问题
CSS:
.ui-layout-pane-west
{
z-index:1008 !important; /*any value higher than the modal dialog's z-index */
}
在使用上述 css 之前,我建议您检查模态面板的 z-index 并相应地更改值。
编辑
查看以下链接 Problem with p:layout inside of p:dialog在 primefaces 论坛上,仔细查看 jQuery Layout and jQuery Dialog 的来源其中构建了 primefaces 组件,你可以看到 dialogLayout_settings = {
模态对话框初始化为
zIndex: 0
}z-index:0
, 因此我建议你设置 z-index
的 <p:dialog>
一些常数值,如
.ui-dialog{z-index:1005 !important;}
然而,请使用您的其他组件进行测试以避免重叠。
希望这对您有所帮助。
关于css - p :inputText within p:layoutUnit does not work inside p:dialog,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13451002/
如何删除顶部 layoutUnit 和中间 layoutUnit 之间的 ui-resizer?我不明白它为什么会出现,我试过使用 closable、resizable,但它不起作用。 这是我的ind
我正在使用 primefaces 布局组件,并且有一个中心和一个右侧的布局单元。我希望在中心布局中有一个链接/按钮,它可以展开右侧的布局单元,因为当我第一次加载页面时,我将右侧的布局默认为折叠状态。我
我是 Primefaces 的新手,所以我希望这不是显而易见的。 简而言之,我创建了一个简单的完整页面布局,其中包含一个北栏和一个中心部分。当我在北 LayoutUnit 中放置一个工具栏时,我得到一
我的问题很简单。我正在使用 PrimeFaces 3.0 和 layoutUnit 组件。 Myxhtml ... 结果是这样的: 当我检
我使用的是 primefaces 5.0。下面是我的页面,我想将高度固定设置为 layoutunit 西部和中心的 200px。有没有可能这样做?当前高度将被忽略。
我正在使用 和 为了组织我的网页结构,primefaces 将他自己的 css 添加到内容中,这里有一些图像可以帮助您理解: 之前: 之后: 我想知道是否可以只禁用 的 css .谢谢。 最佳答案
我的问题很简单。我正在使用 PrimeFaces 4.0 和布局组件。 问题来了,当我尝试调整它的 CSS 时。我想将其背景设置为无,我尝试了经典的 style="background: none !
dynamically on click of link from menu through Ajax的内容
我在 Tomcat 7 上使用带有 Primefaces 的 JSF2。我在 baseLayout.xhtml 中创建了一个布局,如下所示:-
from displaying border and/or scrollbars?
我正在使用PrimeFaces 3.0,并且想将合并到我的页面中。 “fullPage”模式下的布局组件可以很好地划分页面,但是我的外观有些问题。这是我的测试页的样子: 专门查看底部/南部布局单元。我
我有一个包含一些输入组件的模态对话框。 当在对话框中使用 p:layout 时会出现问题。 p:layoutUnit 中的 p:inputText 组件可以在第一次获得焦点,但随后它对键盘没有响应,因
我是一名优秀的程序员,十分优秀!