html - 使用 <h :outputStylesheet> makes <p:outputLabel> component invisible

标签 html css jsf primefaces

我在 JSF 中处理的网页有一个相当奇怪的问题。基本上,当我使用 h:outputStylesheet 标签包含网站的样式表时,表示文档标题的 outputLabel 组件就会消失。

outputLabel在页面源码中,rendered属性=true,但是不可见。

我在带有 Glassfish 4.1 的 netbeans 中使用 JSF2.2、PrimeFaces 5.1、OmniFaces 1.8(尽管页面上没有任何 omnifaces 标签)。在 Chrome 版本 38.0.2125.111 m 中测试。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:pf="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Activity View</title>
        <h:outputStylesheet library="stylesheets" name="main.css"/>
    </h:head>
    <h:body>
        <div id="title" class="pageHeader">
            <pf:outputLabel value="Activity: [Title]: [Type]"/>
        </div>
        <div>
            <pf:accordionPanel>
                <pf:tab title="Brief" >
                    <p>
                    </p>
                </pf:tab>
            </pf:accordionPanel>            
        </div>
    </h:body>
</html>

这是 CSS:

.pageHeader{
font-size: x-large;
float: left;
margin-right: 10px;

谁能阐明为什么会出现这种情况?我在网站的其他地方使用过这种模式,没有任何问题。

最佳答案

原因是 float: left; - 您可以通过选择 div 并在 firebug 中一一禁用样式来验证这一点:

enter image description here

float 使 div 重叠,如所述 here .

所以你可以

  • 删除 float: left;。似乎与当前代码没有区别。
  • style="clear: both" 放在正下方的 div 上

还有更多解决方案,称为“clearfix”。

关于html - 使用 <h :outputStylesheet> makes <p:outputLabel> component invisible,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26912733/

相关文章:

css - 如何去除图像周围出现的边框?

javascript - 可点击的 li 但另一个 li 不可点击

css - 如何转义显示: -webkit-box; declaration in LESS?

jsf - 在页面之间发送参数的最佳方式是什么?

java - org.hibernate.exception.JDBCConnectionException : Cannot open connection

java - <h :commandButton> doesn't start the action - NO IDEA?

html - Firefox 无法通过 HTTPS 加载 CSS 文件

javascript - class 和 id 名称拼写错误的预防工具

javascript - 根据div标签的宽高样式属性显示图片

css - 居中 DIV w/width 取决于文本,由两个应该填充包含 DIV 的 div 缓冲