How do I override a specific <p:panelGrid> in my Stylecheet?
In according to this: How to hide time-slots ...
I tried:
#frm_dash\3Adisplay td.ui-panelgrid {
padding:0px 0px;
}
and
#frm_dash\3Adisplay .ui-panelgrid td {
padding:0px 0px;
}
But it seems not working.
The page is build in this physical structure:
<h:form id="frm_dash">
[...]
<p:panelGrid id="pnlg_page" style="width: 100%;">
[...]
<p:row>
<p:column style="width: 50%; vertical-align: top" colspan="1">
<p:panelGrid id="display" columns="2">
[...]
</p:panelGrid>
</p:column>
<p:column colspan="1" style="vertical-align: top;">
[...]
</p:column>
</p:row>
[...]
</p:panelGrid>
[...]
</h:form>
Primefaces 3.4.1. - Tomcat 7.x - Mojarra
Thanks for your help.
You made 2 mistakes:
The \3A must be followed by a blank space.
The .ui-panelgrid class is been set on the <table> itself, not on a child of it.
So, this should do:
#frm_dash\3A display.ui-panelgrid td {
padding: 0;
}
Or just this, as it makes no sense to use a classname selector on an element which is already selected by an ID which is by itself supposed to be unique already:
#frm_dash\3A display td {
padding: 0;
}
As a different alternative, give the panel grid a style class so that you can reuse the same appearance on the other elements:
<p:panelGrid id="display" columns="2" styleClass="nopadding">
with (a more clean CSS selector)
table.nopadding td {
padding: 0;
}
See also:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
just add a css code
.ui-panelgrid .ui-panelgrid-cell{
padding 0px;
}
this code if you import your page kill primefaces css
Related
This is my page structure:
<p:panelGrid>
<p:row>
<p:column>
<p:panelGrid id="innerPg_1">
</p:column>
<p:column>
<p:panelGrid id="innerPg_2">
</p:column>
</p:row>
</p:panelGrid>
I would like to override the padding attribute on the ui-panelgrid-cell class, only for the panelGrid with id="innerPg_1", by making my own css rule.
How can I do that?
Tried with the following rule:
#innerPg_1 .ui-panelgrid-cell {
padding: 1px 1px !important;
}
but it doesn't work. Shouldn't it be a wrong rule?
The produced html part is:
<td role="gridcell" class="ui-panelgrid-cell">
<tabled id="formId:innerPg_1"class="ui-panelgrid ui-widget role="grid">
Well, the id of the component in the produced html isn't innerPg_1, it is formId:innerPg_1.
So, in your css you should use the following rule: #formId\:innerPg_1 .ui-panelgrid-cell {...}. (Don't forget the slash!!)
I'm not sure what are you trying to achieve, but at first, try just to change the background-color, just to check if the rule is being overrided
Also, using styleClass instead of id might be a better option, so you could reuse it for another panelGrid
I need to remove only a bottom border as displayed by <p:row> in <p:panelGrid>. I attempted the following.
CSS :
.panelgrid-cell-noborder.ui-panelgrid .ui-panelgrid-cell {
border-bottom: none;
}
XHTML :
<p:panelGrid style="width: 100%;">
<p:row>
<p:column>a</p:column>
<p:column>b</p:column>
</p:row>
<p:row>
<p:column styleClass="panelgrid-cell-noborder">c</p:column>
<p:column styleClass="panelgrid-cell-noborder">d</p:column>
</p:row>
<p:row>
<p:column>e</p:column>
<p:column>f</p:column>
</p:row>
</p:panelGrid>
The bottom border from the middle row is expected to be removed but it does not.
How to remove the bottom border from the middle row, in this example?
Every cell has border in this case by default, so you should cancel bottom border and top border of the row below:
XHTML:
<p:panelGrid style="width: 100%;">
<p:row>
<p:column>a</p:column>
<p:column>b</p:column>
</p:row>
<p:row>
<p:column styleClass="panelgrid-cell-noborder-bottom">c</p:column>
<p:column styleClass="panelgrid-cell-noborder-bottom">d</p:column>
</p:row>
<p:row>
<p:column styleClass="panelgrid-cell-noborder-top">e</p:column>
<p:column styleClass="panelgrid-cell-noborder-top">f</p:column>
</p:row>
</p:panelGrid>
CSS:
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-bottom {
border-bottom: none;
}
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-top {
border-top: none;
}
Also, your CSS was incorrect, you put ui-panelgrid together with the cell style, check that in my example too.
Edit:
You'll probably have to override theme styles too if you have them by default, because there are borders defined in both theme and primefaces styles, you could try adding this for example:
/* cancel border defined in aristo theme */
.ui-panelgrid .ui-widget-content{
border: none;
}
/* extra: you can add this if you want to recover the same color you cancelled above */
.ui-panelgrid .ui-panelgrid-cell {
border: 1px solid #a8a8a8;
}
The following <p:panelGrid> contains another <p:panelGrid>s.
<p:panelGrid columns="2" styleClass="panelgrid-noborder">
<p:panelGrid columns="1">
<h:outputText value="1"/>
<h:outputText value="2"/>
</p:panelGrid>
<p:panelGrid columns="1">
<h:outputText value="1"/>
<h:outputText value="2"/>
</p:panelGrid>
</p:panelGrid>
Just as an example, I need to remove all borders only from the parent/outer(most) <p:panelGrid>.
The following CSS class,
.panelgrid-noborder.ui-panelgrid tr, .panelgrid-noborder.ui-panelgrid .ui-panelgrid-cell {
border: none;
}
Removes borders from all <p:panelGrid>s.
I also tried using a plain CSS class like,
.panelgrid-noborder {
border: none;
}
and give it to the columnClasses attribute - columnClasses="panelgrid-noborder" but it does not remove borders at all.
How to remove borders from a parent <p:panelGrid> i.e CSS classes should only be applied to the current <p:panelGrid> to which theses classes are specified? This should not affect any other <p:panelGrid>s.
The selector .panelgrid-noborder.ui-panelgrid tr basically means "match every <tr> of an element having class panelgrid-noborder ui-panelgrid".
You only want to match the immediate child. You need to use a more specific selector for that, specifically the child combinator selector E > F.
So, this should do:
.panelgrid-noborder.ui-panelgrid > tbody > tr,
.panelgrid-noborder.ui-panelgrid > tbody > tr > td {
border: none;
}
Please note that browsers implicitly put <tr> elements in <tbody> when no <thead> or <tfoot> is specified. You can see it in browser's HTML DOM tree inspector.
See also:
CSS tutorial
I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.
components inside panelgris are always middle aligned, instead of top.
tried whatever they said in the below post.
How to control alignment of DataTable inside of a PanelGrid?
Please let me know if there is a remedy.
The <h:panelGrid> renders a HTML <table> element. The vertical alignment of a table cell <td> defaults indeed to middle. You want to make it to be top instead. This is easy with CSS.
<h:panelGrid styleClass="foo">
with
.foo td {
vertical-align: top;
}
If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:
.foo>tbody>tr>td {
vertical-align: top;
}
so that only the panelgrid's own table cells are top aligned.
To learn all about CSS, check http://www.csstutorial.net.
Use the panelGrid's columnClasses attribute to identify a CSS class that includes the vertical-align: top; style:
<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>
and the CSS file:
.topAligned {
vertical-align: top;
}
The contents of the first column in the panelGrid will then be top-aligned within their cells.
Use the styleClass for the panelGrid as in the following example code:
<h:panelGrid columns="2" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>
Then in the css configure as follows:
.top-aligned-columns td{
vertical-align: top;
}
With this method you will be able to not only top-align the rows but you can also apply the same styleClass to other panelGrids within the encompassing panelGrid.
For example:
<h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
<h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" >
<p:ajax event="change" process="#this" update="tvQuickScore"/>
</p:inputText>
<p:outputLabel value="#{resources['Name']}" />
<p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
<p:outputLabel value="#{resources['Surname']}" />
<p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:panel>
How would I align everything in my below to the far right?
<div id="container">
<h:form id="authenticate">
<h:panelGrid columns="5" cellpadding="6">
<h:inputText id="email" value="" />
<p:watermark for="email" value="Email"/>
<h:inputSecret id="password" value="" />
<p:watermark for="password" value="Password"/>
<p:commandButton id="login" value="Login" align="right"/>
</h:panelGrid>
</h:form>
</div>
The <h:panelGrid> renders a HTML table. You basically want to apply text-align: right; on every <td> element it renders. With the current code, easiest would be to apply the following:
#authenticate table td {
text-align: right;
}
You can of course also be more specific, e.g. giving the <h:panelGrid> its own styleClass and defining a rule in CSS (which would be applied directly on the rendered HTML <table> element).
<h:panelGrid styleClass="className">
with
.className td {
text-align: right;
}
You can also give each <td> element its own class by columnClasses attribute which accepts a commaseparated string of CSS classnames which are to be applied repeatedly on the <td> elements. If you want to apply the same class on every <td> element, just specify it once:
<h:panelGrid columnClasses="className">
with
.className {
text-align: right;
}
As an extra hint: rightclick the webpage in webbrowser and choose View Source, then you'll understand better what JSF is all exactly generating.
actually in same form i used <p:panel> and got good result. looks like ;
<p:panel styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<p:commandButton value="Add New Tab"
actionListener="#{xxx.createNewTab}" process="#this"
update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
</p:panel>
A little late, but might help someone, as it was what I needed...
If the alignment is not limited to this specific table, but rather the default format for all table cells, then just add this to your CSS file:
td {
text-align: right;
}
Then, all <td> elements, including those generated by JSF, will be formatted that way.