时间戳

首页 > 解决方案 > panelGrid 边框不想被隐藏

html - panelGrid 边框不想被隐藏

问题描述

我正在尝试使用 Primefaces 开发一种形式，在两个网格之间有一个无法隐藏的边界。我试图在 0px 上隐藏边框和边框宽度。除了这个之外，所有的边界都消失了。我不知道我可以通过什么来解决这个问题。

页面预览 ：

在此处输入图像描述

页面 xhtml：

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:fn="http://java.sun.com/jsp/jstl/functions"
            xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml"
            xmlns:sec="http://www.springframework.org/security/tags">

<ui:define name="titre">
    <h:outputText value="#{lbl['page.entretien.annuel.personnel.title']}"
                  styleClass="titre"/>
</ui:define>

<ui:define name="content">
    <p:panel id="entretienAnnuelPersonnelPanel" style="border: hidden ; border-width: 0px">


        <p:panelGrid columns="2" style="border: hidden">
            <p:panelGrid columns="1" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <h1>#{lbl['entretien.annuel.personnel.organisation.commerciale']}</h1>
            </p:panelGrid>
            <h:panelGrid columns="2" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.comprehension']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.actions']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.reportings']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.orientation']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.travail.equipe']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
  {lbl['entretien.annuel.personnel.organisation.commerciale.prise.decision']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <h3>Commentaire</h3>
                <p:inputTextarea rows="6" cols="45" />
            </h:panelGrid>
        </p:panelGrid>
        <p:panelGrid columns="2" style="border: hidden">
            <p:panelGrid columns="1" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <h1 style="margin-top:0">#{lbl['entretien.annuel.personnel.prerequis.professionnel']} 
 </h1>
            </p:panelGrid>
            <h:panelGrid columns="2" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.comprehension.produits']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.placement.produits']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.maitrise.objections']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.comprehension.analyse']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <h3>Commentaire</h3>
                <p:inputTextarea rows="6" cols="45" />
            </h:panelGrid>
        </p:panelGrid>
    </p:panel>

</ui:define>

</ui:composition>

谢谢 ！

标签： htmlcssjsfprimefaces

解决方案

https://primefaces.github.io/primefaces/8_0/#/components/panelgrid?id=blank-mode

要删除边框ui-noborder，请使用 styleClass 属性将样式类添加到组件中，要删除边框和背景颜色，请应用ui-panelgrid-blank样式。

推荐阅读