Question

我在我的java ee应用程序中使用现成的模板（带有css和j-queries）。除了primefaces 3.2的panelgrid控件之外，所有的primefaces组件都被正确呈现。它以边框显示。我希望它没有边界。我已从自定义现成模板的CSS中删除了所有表格样式。边界还在那边。当我删除现成的模板时，panelgrid完美呈现没有任何边框。如何删除边框以及导致此问题的原因是什么？

编辑： xhtml文件：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      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=utf-8" />
<title>AP administration panel - A massive administration panel</title>



</h:head>

<h:body>

    <div>
    <h:form>
        <p:panelGrid columns="2" style="border: none">
        <h:outputText value="scrip symbol"/>
        <p:inputText value=""/>
        <p:commandButton value="submit"/>
        </p:panelGrid>

    </h:form>


    </div>




</h:body>

</html>

Answer 1

当覆盖PrimeFaces默认样式时，您必须指定的CSS选择器至少具有相同的强度或指定更强选择器。 CSS选择器（级联规则）的强度在W3 CSS specification中指定，并在本文中清楚地解释：Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade。

基于PrimeFaces自己的CSS，以下选择器应该：

.ui-panelgrid tr, .ui-panelgrid td {
    border: none;
}

只需将它们放在.css文件中，<h:outputStylesheet>位于<h:body>开头，然后在 PrimeFaces自己的风格之后将其包含在中

<h:body> <h:outputStylesheet name="layout.css" /> ... </h:body>

另见：

How to remove border from specific PrimeFaces p:panelGrid?

How do I override default PrimeFaces CSS with custom styles?

更新：根据您的更新，您的CSS似乎根本没有加载。您应该通过验证浏览器内置webdeveloper工具集中的HTTP流量（在Chrome / IE9 / Firebug中按F12）并看到它返回HTTP 404错误来注意到这一点。使用<h:outputStylesheet>时，您需要将CSS文件放在webcontent的/resources文件夹中。因此，您必须拥有/resources/css/mycss.css才能使用<h:outputStylesheet name="css/mycss.css" />。

另见：

How to reference CSS / JS / image resource in Facelets template?

primefaces组件不使用自己的css

1 个答案:

另见：

另见：