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
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
We are upgrading from jsf 1.2 to jsf 2.
We are using apache myfaces 2.1 and rich faces 4.3.
The issue is headerClass attribute seems to be not working for rich:dataTable. Following is the xhtml code
.class2{
border: 1px solid #000;
}
.class1{
text-align:left;
color:#000;
font-weight:normal;
}
<rich:dataTable value="#{bean.quns}" var="quns" headerClass="class1" columnClasses="class2">
<f:facet name="header">
<h:outputText value="User Name : #{bean.userName}"/>
</f:facet>
<rich:column>
<h:panelGrid id="qns#{index+1}" columns="2">
<h:outputText value="qns #{index+1}"/>
<h:selectOneMenu value="#{quns.question}">
<f:selectItems value="#{bean.questionPool}" />
</h:selectOneMenu>
<h:outputText value="Answer"/>
<h:inputText value="#{quns.answer}"/>
</h:panelGrid>
</rich:column>
</rich:dataTable>
The columnclasses attribute is working perfectly fine.
When rich:dataTable built in css style for table header cell is modified like below :
.rf-dt-hdr-c{
text-align:left;
color:#000;
font-weight:normal;
}
header class works perfectly fine indicating that default style sheet is overwriting explicit one.
How can headerClass styleClass will be made to work ?
Can anyone please help ?
When you investigate the rendered XHTML-code, you will recognize
the headerClass content is added to the tr of the header row
the columnClassES content is, tokenized by space, added to the appropriate columns td
To have the commands of your class1 CSS on the same layer like rf-dt-hdr-c, just change the CSS definition to
.class1 th {
text-align:left;
color:#000;
font-weight:normal;
}
Hope it helps...
I'm trying to apply a styleClass to a h:panelGrid without applying it to its children:
<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
<p:fieldset id="fs1" legend="fs1" style="width: max-content">
<h:panelGrid columns="3">
<p:outputLabel for="id1" value="#{messages.label_application}" />
<p:selectOneMenu id="id1" required="true" value="som">
<f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />
<f:selectItems value="#{bean.availableItems}" />
</p:selectOneMenu>
<p:message for="id1" />
</h:panelGrid>
</p:fieldset>
<p:fieldset id="fs2" legend="fs2" style="width: max-content">
<h:panelGrid columns="3">
<!--more fields-->
</h:panelGrid>
</p:fieldset>
</h:panelGrid>
My topAligned css:
.topAligned td{
vertical-align: top !important;
}
The problem is that I need to top align the two fieldset and that works well with the styleClass I apply, but it also applies this styleClass to all the children. Therefore, all the fields (outputLabel, selectOneMenu, etc...) of the two fieldset get top aligned too...
I tried all the different ways to specify the top alignment from this question but without success... I also tried to look at the html source but it gets a bit confusing with all the jsf and primefaces stuff...
If you know a trick that will work...
With
.topAligned td{
vertical-align: top !important;
}
and the JSF-generated HTML output
<table class="topAligned">
...
</table>
you're basically applying the style on every single <td> element of the <table>, also those of the nested <table>s.
If you want to apply the style on only the immediate <td> elements of the parent <table>, then you should be using columnClasses attribute instead:
<h:panelGrid ... columnClasses="topAligned,topAligned">
with
.topAligned {
vertical-align: top;
}
This will end up in the generated HTML output as follows:
<table>
<tbody>
<tr>
<td class="topAligned">...</td>
<td class="topAligned">...</td>
</tr>
</tbody>
</table>
and not be applied on the <td>s of the nested <table>s.
Note that I also removed the nonsensicial !important workaround. It's supposed to be used only when you want to override a hardcoded style by an external CSS style.
Also note that this problem is not specifically related to JSF. JSF is in the context of this question merely a HTML code generator. You'd have had exactly the same problem when dealing with "plain vanilla" HTML/CSS. The problem is more in the lack of familiarity with basic HTML and CSS. On http://htmldog.com you can find decent HTML/CSS tutorials.
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
I have a hidden property which is fetched from ebean. how do i pass that color code property to css function?
<h:panelGrid id="testpanel"
columns="#{message.no_of_columns}" rows="#{message.no_of_rows}"
styleClass="dynamicGrid">
<c:forEach items="#{bLDashBoardAction.listBondLoc}" var="item">
<h:panelGroup> <h:outputText value="#{item.rackTagCode}" />
<h:hiddenInput value="#{item.colorEBean.colorCode};" />
</h:panelGroup>
</c:forEach>
</h:panelGrid>
this is my css property,background need to be assigned from panelgrid colorcode
.dynamicGrid td
{
width: 50px;
height: 50px;
border: 4px solid gray;
background:
}
As you're restricted by strange design, your best bet is really to apply the style directly on the cell's content instead.
<h:outputText value="#{item.rackTagCode}" style="display:block;color:#{item.colorEBean.colorCode};" />
The display:block will make it to span the entire cell.
Don't think you can pass from JSF to css , you can create several classes with predefined background color , like .dynamicGridRed and .dynamicGridYellow
and call them conditionally styleClass="#{item.colorEBean.colorCode}"
wher colorCode can return dynamicGridRed or dynamicGridYellow
or something like
styleClass="#{item.colorEBean.useRedCode?'dynamicGridRed':'dynamicGridYellow'}"
another option would be use inline css like:
style="width: 50px;height: 50px;border: 4px solid gray;background:#{item.colorEBean.colorCode}"
INMO , you better not try to manipulate the content of css, just make a bunch of predefined css classes...
but I'm not a css pro , so i might be wrong