CODEWITHSUNDEEP
htmlcssjsfprimefaces
Iofacture
Iofacture

Reputation: 685

Issue removing border from one column in primefaces table

I am beginning to realize just how terrible I am at CSS now that i've decided to start using the prime-faces library. I have a 3 column table, the third column of which i would like to use as an optional error field. I do not want this field to show up as part of the table, even when the error is rendered. However after searching and finding a few solutions online, I still cannot get the border style to be overridden. Here is a sample of my markup.

Its the "noCellBorder" column I want to have no styles or borders of any kind:

<p:panelGrid>

  <f:facet name="header">
    <p:row>
      <p:column>Month</p:column>
      <p:column>Amount</p:column>
    </p:row>
  </f:facet>

  <p:row>
    <p:column>
      <h:outputLabel class="rightLabelPadding" for="formLine1">
        <h:outputText value="#{labels.formLine1}" escape="false" />
      </h:outputLabel>
    </p:column>
    <p:column>
      <p:inputText id="formLine1" value="#{managedBean.formBean.line1}" />
    </p:column>
    <p:column styleClass="noCellBorder">
      <h:message class="fieldErrorMessage" for="formLine1" />
    </p:column>
  </p:row>

CSS

.noCellBorder > td {
  border: none !important;
}

EDIT //

Okay not all is a total loss I suppose I've learned how to use JSFiddle. I haven't had to really delve too deeply into CSS in at least 2 years so please go easy on me. Here is the link to a working demo:

[Removed by OP]

Upvotes: 2

Views: 2400

Answers (2)

Geinmachi
Geinmachi

Reputation: 1251

Other classes for header and row give borders too, so you have to get rid of them like this (give your panelGrid class noBroder like this <p:panelGrid styleClass="noBorder">) 

.noCellBorder, table.noBorder thead tr.ui-widget-header, table.noBorder .ui-panelgrid-even, table.noBorder .ui-panelgrid-odd {
     border: none !important;
}

But is gives black borders for other cells, don't know if you like it.

Upvotes: 1

m4n0
m4n0

Reputation: 32275

You are currently using descendant/child selector but it is required to use multiple CSS selector since you are targeting the td element which has a class .noCellBorder

td.noCellBorder{
  border: none !important;
}

Also try to avoid !important and increase CSS specificity, so your code should be.

td.ui-panelgrid-cell.noCellBorder {
  border: none;
}

Updated JSfiddle

Modified Code:

.ui-panelgrid .ui-panelgrid-cell {
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  padding: 4px 10px;
}
td.ui-panelgrid-cell.noCellBorder {
  border: none;
}
<table id="formNC3Form:j_id_10_1_4" class="ui-panelgrid ui-widget" role="grid">
  <thead class="ui-panelgrid-header">
    <tr class="ui-widget-header" role="row">
      <td role="columnheader" class="ui-panelgrid-cell ui-widget-header">Month</td>
      <td role="columnheader" class="ui-panelgrid-cell ui-widget-header">Amount</td>
    </tr>
  </thead>
  <tbody>
    <tr class="ui-widget-content ui-panelgrid-even" role="row">
      <td role="gridcell" class="ui-panelgrid-cell">
        <label class="rightLabelPadding" for="formNC3Form:formNC3Line1">1. January</label>
      </td>
      <td role="gridcell" class="ui-panelgrid-cell">
        <input id="formNC3Form:formNC3Line1" name="formNC3Form:formNC3Line1" type="text" value="" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" />
      </td>
      <td role="gridcell" class="ui-panelgrid-cell noCellBorder"></td>
    </tr>
</table>

Upvotes: 1

Related Questions