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 :)
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 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{
...
}
I'm trying to show only the button add and the uploaded picture below the button, but it doesn't matter what I do in my CSS, the table generated by richfaces is always the same:
This is my form using richfaces:
<ui:define name="content">
<h:form>
<h:panelGrid>
<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp" ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
<a4j:ajax event="uploadcomplete" execute="#none" render="info" />
</rich:fileUpload>
<h:panelGroup id="info">
<h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
<rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
<a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
</rich:dataGrid>
<br />
<a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
</h:panelGroup>
</h:panelGrid>
</h:form>
</ui:define>
And this is how is generated :
I want something more simple 'cause in another moment I will some jQuery slider plugin. But I can't disappear with this table generated by richfaces.
And yes skins are disable in my richfaces configuration:
update
Following the suggestion my CSS look like this now:
<style>
div div.rf-fu { border: 0px; width: 85px; }
div div.rf-fu-hdr { border: 0px; }
span span.rf-fu-btn-clr { border: 0px; }
span.rf-fu-btns-lft{ width: 85px; }
span.rf-fu-btns-rgh{ display: none; }
div div.rf-fu-lst { display:none; }
</style>
And now my add.. file button looks like:
These post was very useful too:
Should I use 'border: none' or 'border: 0'?
Inner div has borders - how to override with a class on an outer div?
You can use Adrian's answer to override richfaces css however you don't need to use !important to override richfaces css. Just use selector specificity to override the css applied by richfaces.
For Instance in case where you are using important, apply the css as:
div div.rf-fu-lst { display:none } and it will work for you.
I'm currently doing this for my project. You have to override the richfaces css in your stylesheet like this:
.rf-fu, .rf-fu-hdr {
float: left;
width: auto;
border: none;
background: none;
padding: 0;
margin: 0;
}
.rf-fu-btn-cnt-add {
paddin-left: 0;
cursor: pointer;
}
.rf-fu-btn-add {
margin: 0;
}
.rf-fu-btns-rgh, .rf-fu-lst {
display: none;
}
.rf-fu-btns-lft {
width: 100%;
}