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 导入过滤器时出现问题

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

首页

博学

6Ren·AI

商城

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