i try to change header image of the Primefaces Datatable. Bu t i'm not able to find out exact css class for Datatable header.
style class as follows
.thresholdTableClass.ui-datatable .ui-datatable-header {
border: 1px solid #bed6f8;
background: #c6deff url(../img/header-panel.png) repeat-x !important;
font-weight: bold;
color: #FFFFFF;
}
my datatable is
<p:dataTable id="thresholdPanel" var="threshold"
value="#{target.thresholdVOList}" editable="true"
rowIndexVar="thresholdRowCntr" styleClass="thresholdTableClass">
</p:dataTable>
but above values are not effecting my datatable header.
I have tried to to find out the styleclass, but what i found is
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: url("/EdgeApp/javax.faces.resource/images/default.png.xhtml?ln=primefaces-bluesky") repeat-x scroll 0 0 #C6DEFF;
border: 1px solid #BED6F8;
color: #000000;
font-weight: bold;
}
please help.
The primefaces documentation has really good documentation on which classes to applies to which part of each component. For datatable headers, the following styleclass should be overridden:
.ui-datatable-header: Table header
I just verified that adding a background picture works:
.ui-datatable-header {
background: url(../images/myImage.png)
}
This is the way to do it. Of course you can fine tune your css selector to only let the style apply to tables with certain ids and so on.
Also, this style applies to headers, not columns. In other words you need a header, something like:
<p:dataTable>
<f:facet name="header">
<h:outputText value="Header text" />
</f:facet>
</p:dataTable>
Also note that you don't have to specify the styleclass on the datatable component.
.customStyleClassName .ui-state-default{ }
Will resolve the above issue.
Thanks for the suggestion.
For all tables:
th.ui-state-default{
...
}
Related
I want to make resizeable inputTextarea in dataTable. Written next xhtml by the Primefaces-Users-Guide and ShowCase
<p:dataTable id="valueSelection" var="value"
value="#{dtBasicView.cars}">
<p:column headerText="Test" >
<h:inputTextarea value="#{car.brand}" autoResize="true" cols="38"
style="overflow: hidden; overflow-wrap: break-word; resize: none;"/>
</p:column>
</p:dataTable>
But when the text in inputTextarea is only one row, the height is for two row.
In FireFox the element row is (without class):
<textarea id="mainform:tabPanel:valueSelection:1:j_idt132" name="mainform:tabPanel:valueSelection:1:j_idt132" cols="38" style="overflow: hidden; overflow-wrap: break-word; resize: none;" disabled="disabled">STEVE6666</textarea>
And the generated css is (without height):
element {
overflow: hidden;
overflow-wrap: break-word;
resize: none;
}
Why primefaces does not generate height in css and class attribute in html tag?
In your example you used h:inputTextarea, which is the default implementation of the component in JSF, and thus, does not support auto resize.
Try to use p:inputTextarea, which is the PrimeFaces one, and check if the desired behavior will happen.
Click on the following link,
TextBox with search Image on Left
i want the text box exactly the sameway with watermark in it.
I tried multiple ways,but nothing worked
Content from my .xhtml file
<h:inputText id="bundelId" styleClass="icon2" value="">
<p:watermark value="Enter Bundel Id" for="bundelId" styleClass="icon2"></p:watermark>
</h:inputText>
My css contains following classes
.icon2 {
background: url(search.gif) no-repeat 4px 4px;
padding:4px 4px 2px 20px;
height:10px;
margin: 0;
}
.icon3 {
float: right;
background: url(search.gif) no-repeat left bottom;
border: 0;
cursor: pointer;
margin: 0;
}
I have tried with both jsf and primefaces tags together with css classes mentioned above.
Can someone help?
if you are using FontAwesome you could try:
<p:watermark value=" Enter Bundel Id" for="bundelId" />
<h:inputText id="bundelId" value="" style="font-family:Arial, FontAwesome">
being the unicode for icon-search.
https://fortawesome.github.io/Font-Awesome/cheatsheet/
(How) is it possible to dynamically resize primefaces galleria depending on the size of the sourrounding div-container? The galleria should allways fill the entire surrounding div-container.
Would be jscript/jquery the right approach?
http://www.primefaces.org/showcase-labs/ui/galleria.jsf
Try make the .ui-galleria width attribute to 100%. Make sure that css class is relative.
In order to make both the gallery and the images inside fill the container, add in the css:
.ui-panel-images {
width: 100%;
height: 100%;
}
.ui-galleria-panel {
width: 100%;
height: 100%;
}
Also, add the following to the p-galleria element:
panelWidth="auto"
I'm trying something similar, and I also came to a problem.
I am using the p:galleria element like these:
<h:form id="galleriaForm" style="border: 2px solid blueviolet; min-height: 800px">
<p:panelGrid columns="1" layout="grid" style="border: 2px solid aqua; min-height: 100%">
<p:row style="display: inline-block; min-height: 800px;border: 2px solid green; min-width: 100%">
<p:column style="display: inline-block; min-height: 100%; min-width: 100%;border: 2px solid red">
<p:outputLabel value="Überschrift" style="display: block;"/>
<p:galleria value="#{ImageManager.layoutBauenBilderlsite}"
id="galleriaID"
var="image"
showCaption="false"
transitionInterval="9000"
effectSpeed="1500"
style="display: inline-block; min-width: 100%"
effect="drop"
panelHeight="">
<p:graphicImage url="resources/images/#{image}"
style="height: 1040px; border:1px dotted lightgray; margin-left: 30%"/>
</p:galleria>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
To change the panelHeight attribute the h:body uses onload to call a js function:
function setGalleriaHeight(){
var h = window.innerHeight;
document.getElementById("galleriaForm:galleriaID").setAttribute("panelHeight", String(h));
}
The panelHeight attribute is set correctly, as I can see with my Browser, but the Element does not change.
To make sure that the attribute is correct I added it in my source code and it worked fine.
I also tried to set the the size as style="height: h" but then only the loaded image "p:graphicImage does not resize with.
Maybe there is someone to know why it does not change.
I have a problem with primefaces datatable. As you can see there is an alignment problem with columns border and headers. Is this a primefaces bug or there is something wrong with my datatable? By the way datatable has dynamic columns.
<p:dataTable scrollable="true" scrollWidth="100%" editable="true" editMode="cell"
var="invoiceLine" value="#{myController.invoiceLines}"
selection="#{myController.selectedInvoiceLine}" selectionMode="single" rowKey="#{invoiceLine.uuid}"
>
<p:columns value="#{myController.columns}" var="column"
styleClass="ui-editable-column" width="50"
columnIndexVar="colIndex">
//some stuff
</p:columns>
</p:dataTable>
Do one trick,
Remove scrollable = true
and create new style class like,
.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper{
overflow: auto;
width: 100%;
padding-bottom: 5px;}
apply styleClass to p:datatable like styleClass="ui-datatable-hor-scroll"
The problem is still present in 6.2.
Another solution, with width set in style attribute, is to replace
<p:column style="width:100px">
with
<p:column style="width:calc(100px)">
MDN-calc() description
For anyone else who has this problem - Primfaces scrollable continues to have issues. I am on 5.1 and it isn't working.
Just use a normal datatable and then use CSS3 to get the scrolling to work:
https://jsfiddle.net/xuvsncr2/170/
Of course don't use table, thead, tr etc. for targeting elements. Instead use css classes so that you get the right datatable.
The tricky part is that in order to set the size of the scroll pane, you need to target the div directly surrounding the table. You can see how I did this below
Heres more on the flexbox for css3: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Heres an example of the css I used for primefaces. I just wrapped my datatable with a <div class="myCompanyScrollable thirtyEM">
.thirtyEM .ui-datatable-tablewrapper{
height: 30em;
}
.myCompanyScrollable table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
.myCompanyScrollable table thead {
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 1.05em);
display: table;
table-layout: fixed;
}
.myCompanyScrollable table tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
.myCompanyScrollable table tbody tr {
width: 100%;
}
.myCompanyScrollable table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/* decorations */
.myCompanyScrollable {
border: 1px solid black;
padding: 0.3em;
}
.myCompanyScrollable table {
border: 1px solid lightgrey;
}
.myCompanyScrollable table td, .myCompanyScrollable table th {
padding: 0.3em;
border: 1px solid lightgrey;
}
.myCompanyScrollable table th {
border: 1px solid grey;
}
This issue is solved in primefaces latest version ( 7.0 )
https://github.com/primefaces/primefaces
Try below jquery code
$('.datatableclassname').find(('div.ui-datatable-scrollable-header ')+'div.ui-dt-c').each(function(index) {
var cur_obj = $(this);
var column_num = parseInt(index+1);
$('.datatableclassname div.ui-datatable-scrollable-body tr > td:nth-child('+column_num+') > div.ui-dt-c').css('width',cur_obj.width()+'px');
});
How do I align the content in the columns created by panelGrid component to the top ?
I tried with no success, the following code
<h:panelGrid columns="2" style="vertical-align:top; " >
<p:tabView style="margin:0px 0px 50px 0px; width: 450px; padding-top: 0px;vertical-align:top" ></p:tabView>
<p:menubar autoSubmenuDisplay="true" style="width: 300px; vertical-align:top" ></p:menubar>
</h:panelGrid>
But the 2 columns created hereby still remain vertically middle aligned.
Based on this answer, you can do like this (I like this approach the most)
<h:panelGrid columnClasses="className">
.className {
vertical-align: top;
}
for me it works if you do it like that:
<h:panelGrid columns="6" cellspacing="4" cellpadding="4" styleClass="panelColumns">
</h:panelGrid>
and create a css file which contains:
.panelColumns td {
vertical-align: top;
}
just as additional hint .. so you do not have to search to long :)