css - PrimeFaces 对话框标题大小不正确-6ren

css - PrimeFaces 对话框标题大小不正确

转载作者：行者123 更新时间：2023-12-02 09:15:08

24

4

PrimeFaces 4.0 对话框标题非常适合 IE 和 Firefox 中的对话框窗口，但不适用于 Chrome，除非我将鼠标光标移到对话框标题上。当我将光标移动到对话框标题时，它会自行缩放并适合对话框窗口。我使用的所有对话框都会遇到此问题，而不仅仅是我在下面发布的对话框。我只在 Chrome 中遇到这个问题。您知道 Chrome 中为什么会出现这种情况以及如何解决此问题吗？

对话框代码和屏幕截图如下:

这是对话框标题首次打开时的状态

This is the status of dialog header when it's opened first

这是当我将鼠标光标移到对话框标题上时的状态。您会看到它具有正常大小。

This is the status of dialog header when I move mouse cursor over it

对话框代码:

        <p:dialog header="#{graphAnalysis.charts.chartTitle} Distribution"
                  closeOnEscape="true" width="800" dynamic="true"
                  height="550" widgetVar="lineChartDialog" closable="true" 
                  onShow="loadLineChart()" minimizable="true" position="center" 
                  id="distChartDialogId" >
            <h:form style="margin-top: 20px;" id="chartForm">
                <p:lineChart id="lineChartId" value="#{graphAnalysis.charts.currentChart}" 
                             style="height: 450px;width: 750px" animate="true" legendPosition="e"
                             widgetVar="lineChartWg" yaxisLabel="Fraction of Proteins" 
                             xaxisLabel="#{graphAnalysis.charts.chartTitle}" 
                             title="#{graphAnalysis.charts.chartTitle} Distribution" zoom="true" />
                <p:remoteCommand name="loadLineChart" update="lineChartId" async="true" process="@this" />
                <p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportLineChart()"/>  
            </h:form>
        </p:dialog>

另一个对话框代码:

       <p:dialog width="800" height="500" widgetVar="graphVis" dynamic="true"
                  closable="true" draggable="true" minimizable="true" position="center"
                  closeOnEscape="true" header="Graph Visualization" onShow="updateGraph()">  
            <h:form>
                <p:panel style="border: none;height:450px" id="graphPanel">
                    <p:mindmap value="#{browse.graph.root}" style="width: 800px;height: 600px">  
                        <p:ajax event="select" listener="#{browse.graph.onNodeSelect}" />  
                        <p:ajax event="dblselect" listener="#{browse.graph.onNodeDblselect}" 
                                oncomplete="details.show()"/>  
                    </p:mindmap> 
                </p:panel>
                <p:remoteCommand name="updateGraph" update="graphPanel" async="true" process="@this" />
            </h:form>
        </p:dialog>

我的页面结构是这样的:

        <html>
           <f:view>
             <h:head>
                ...
             </h:head>
             <h:body>
                <p:layout>
                    <p:layoutUnit>
                        HEAD
                    </p:layoutUnit>
                    <p:layoutUnit>
                        BODY
                    </p:layoutUnit>
                     <p:layoutUnit>
                        FOOTER
                    </p:layoutUnit>                        
                </p:layout>
                DIALOG CODES HERE
             </h:body>
           </f:view>
        </html>

最佳答案

我的解决方案非常糟糕，在某些情况下它不起作用，但在大多数情况下，标题现在可以正确显示。

将代码添加到您的 JavaScript 文件:

function waitForDialogToLoad(dialog, initialWidth, counter){
    //if there was less then 50 tries, try again
    if(counter<50){
        //if dialog hasn't changed its width, it means it hasn't appeared
        if(dialog.width()==initialWidth){
            //increase counter
            counter ++;
            //and try again
            setTimeout(waitForDialogToLoad,10,dialog,initialWidth, counter);            
        }
        else{
            //set final width of header
            var header = dialog.find(".ui-dialog-titlebar");
            header.width(dialog.width());
        }
    }
}

function showDlg(dialog) {
    $.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 

    //if the browser is chrome
    if($.browser.chrome){
        //find dialog object
        var dialogDOM = $("#"+dialog.id.replace(/\:/g,"\\:"));

        //set initial width of header
        var header = dialogDOM.find(".ui-dialog-titlebar");
        header.width(dialogDOM.width());

        //remember width of header
        var currentWidth = dialogDOM.width();

        //show dialog
        dialog.show();

        //set entry counter
        var counter = 0;

        //after 10 miliseconds check if dialog has appeared
        setTimeout(waitForDialogToLoad,10,dialogDOM,currentWidth, counter);
    }
    else{
        dialog.show();
    }
}

然后在 View 中，而不是

dialog.show();

通话

showDlg(dialog);

关于css - PrimeFaces 对话框标题大小不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20459481/

24

4

0

文章推荐： asp.net-mvc - 一起使用不记名 token 和 cookie 身份验证

文章推荐： java - 二叉树无法打印长分支

文章推荐： .net - 将 String.Empty 转换为 Nothing/Null

文章推荐： python - 使用 skimage 导入过滤器时出现问题

primefaces - primefaces 条形图中的不同颜色
我想为每个条显示不同颜色的 primefaces 条形图。我得到的最接近的就像图像: 我想用不同的颜色来表示这些条，比如绿色代表“准时”，黄色代表“警告”，红色代表“逾期” 我尝试使用 model.s
primefaces - Primefaces 对话框的正确构造
我对 Primefaces 3 对话框的构造感到困惑。我在 SO 中看到了具有这种模式的问题。表单在对话框之外。但另一个问题有这个。 Primef
primefaces - primefaces gmap标签的问题
我尝试使用一个简单的gmap示例开始开发Web应用程序，但是它对我不起作用。我使用了在网页上找到的示例电影收藏家。我只在template.html文件中包含了这个代码。我收到此错误: javax.
primefaces - primefaces 中的自定义验证
我正在使用 primefaces 3.0。我有三个文本字段，其中任何一个都是必需的。我如何在 primefaces 中验证这一点。请帮忙..谢谢最佳答案通常，当在组件上使用自定义 f:valida
primefaces - Primefaces pickList 的自定义过滤器
我正在尝试为 primefaces 选择列表创建自定义过滤器。当我按照手册中的说明进行操作时，我在 primefaces 的某处遇到了 TypeError。我对picklist的定义我的过滤
primefaces - 如何限制用户在 Primefaces 的年份范围内选择日期？
我正在努力处理primefaces日历。我需要的是，如果今天是 2011 年 7 月 28 日，我可以限制用户选择 7 月 28 日之前 1 年和 7 月 28 日之后 3 年的日期。我查看了 pr
primefaces - 删除 Primefaces 数据表中的全选复选框
有没有办法删除 p:datatable 标题上的全选复选框。我需要单个行上的复选框，而不是标题上的复选框。最佳答案这非常有效: .ui-chkbox.ui-chkbox-all.ui-widge
primefaces - 如何更新 Primefaces 数据表中的特定行
Primefaces 3.5，Mojarra 2.1.14。这是我的 PF 数据表，它包含一个名为“自动”的不可编辑 bool 列和可编辑的“标签”列:
primefaces - 在 Primefaces 向导的最后一个选项卡上隐藏后退按钮
我想在向导的最后一个选项卡上隐藏后退按钮。我正在使用素面。它的解决方案是什么？谢谢最佳答案您可以使用 jQuery 在客户端执行此操作: 假设您正在使用展示中的向导:http://www.pr
primefaces - 水平滚动 PrimeFaces 数据表？
如果我在 PrimeFaces 数据表中设置属性“scrollable=true”，它可以垂直滚动。但是可以水平滚动这个表格吗？最佳答案 Primefaces 支持在数据表上水平滚动。只需像这样指定
primefaces - Primefaces rowselect事件在3.3版中不起作用
我有这个代码。在用户选择一行并关闭对话框之后，它将触发rowSelect事件。在我更新为primfaces 3.3(我安装了ver3.2)之前，它工作得很好。我在控制台中没有任何异常，当我调试时，我看
primefaces - 如何在 Primefaces 的日历组件中设置年份列表？
是否存在任何方法来设置 primefaces 的日历组件的年份列表？最佳答案对于年份列表，您可以使用 navigator="true" p:calendar 中素面的属性标记和年份范围 c-100
primefaces - 在最后一个选项卡上提交后如何将 primefaces 向导重定向到第一个选项卡
我正在使用 primefaces 3.2。我已经准备好了向导，可以在数据表的同一页面上插入用户信息。向导逐个选项卡获取信息并在确认选项卡上提交。它还将反射(reflect)在数据表的同一页面上。它运行
primefaces - 隐藏 primefaces 表列标题
我有一个 p:treeTable，树内容都在一列中。该树是一个共享组件，因此我的某些页面需要列标题，而有些则不需要。在列标题为空的页面中，它为列标题创建一个空行，这是我不想要的。我确实想要列内容，只是
primefaces - OverlayPanel + 日历 + Primefaces
我使用的是primefaces 3.4，我在 p:overlaypanel 中有一个 p:calendar 。当我选择日期时，覆盖面板关闭(使用 Google Chrome 时)当我使用 Firefo
primefaces - primefaces 5.0日历的一个bug
当我使用日历时，我将“timeOnly”设置为“true”，将“pattern”设置为“HH:mm a”。当输入时间大于或等于“13:00 pm”时，日历每次获得焦点，都会自动将时间更改为“23:
primefaces - 枚举作为 Primefaces 中的下拉列表
我也在尝试获取枚举“CityCodes.java”中定义的城市代码，这是我的枚举类，我的定义如下: public enum Cities { AL("Alabama","1"), AK("Alaska
primefaces - 如何在 PrimeFaces 中制作蒙皮标题栏
在 PrimeFaces 展示页面上有一个简单的标题栏，适合实际主题。我的意思是此页面上的“欢迎来到 PrimeFaces 展示”文本:http://www.primefaces.org/showca
primefaces - 是否可以在 Primefaces 中创建垂直菜单栏？
是否可以在 Primefaces 中创建垂直菜单栏？我习惯了像 Ext-JS 这样简单的纯 AJax 框架，但到目前为止我还没有在 PF 中看到这样的组件。谢谢，乔最佳答案它被称为分层菜单。
primefaces - 设置 Primefaces 滚动面板的滚动速度
是否可以设置 Primefaces 的 ScrollPanel 的滚动速度？ Scrollpanel 在“ native ”模式下的滚动速度可以，但在“默认”模式下不行。我使用的是 Primefac

首页

博学

6Ren·AI

商城

css - PrimeFaces 对话框标题大小不正确