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/
Related
(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 modal housed by a main login page using ui:include. I was able to confirm that the ui:include portion was not causing the issue I am having.
On the modal, I have three JSF elements; two inputSecrets (myFaces) and one CommandLink (myFaces) for a submit button. Here is the code snippet:
<div style="padding: 0px 20px 5px 140px; width: 300px; text-align: left; font-size: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: 600;">
New Password:<br/>
<t:inputSecret forceId="true" id="pwOne" title="New Password" size="27" maxlength="20"
value="#{accountSettingsBean.newPassword}"
tabindex="72" />
<br/><br/>
Confirm Password:<br/>
<t:inputSecret forceId="true" id="pwTwo" title="Confirm Password" size="27" maxlength="20"
value="#{accountSettingsBean.confirmNewPassword}"
tabindex="73"/>
</div>
<div id="submitButton" style="width: 420px; align: left;">
<t:commandLink value="SUBMIT"
style="color:white; text-decoration:none; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); background: #4775AD; background: -moz-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b93d8), color-stop(100%, #4775AD)); background: -webkit-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -o-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -ms-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: linear-gradient(to bottom, #5b93d8 0%, #4775AD 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b93d8', endColorstr='#4775AD', GradientType=0 ); border: 1px solid #848484; padding: 0px 5px;white-space: nowrap;font-size: 14px !important;text-align: center; line-height: 40px;font-weight: bold;-webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-right-radius: 10px; border-radius: 10px 10px 10px 10px; width: 150px; height: 40px; margin-left: -20px; margin-top: 15px; margin-bottom: 10px; display: block;"
action="#{accountSettingsBean.updateExpiredPassword}"
id="lnkUpdateExpiredPw"
binding="#{accountSettingsBean.lnkUpdateExpiredPw}"
tabindex="74" />
In every version of IE available through the dev tools, the tabbing is not working properly. In IE9, the first tab press seems to give focus back to the main page when the modal is seen, and the second tab press gives it to the second inputSecret. In IE8, the tabs work for the "password" and "confirm password" fields, but I can never tab over to the submit button. I cannot tab over to the submit button in any version of IE. Also, hitting "Return" hits the submit button on the main page that houses my modal, instead of having focus on whatever field that IE says it is focusing on.
One thing I have tried is putting in a "onkeydown" event linking to a javascript function to manually give focus to the fields I want. I haven't been able to get this to work yet, but I would like to get to the actual root of the problem as to why its not working in IE.
This is a hack, but I was able to fix this issue in IE by nesting inputtext fields inside the three different elements, like so:
<t:inputSecret forceId="true" id="newPasswordOne" title="New Password" size="27" maxlength="20"
value="#{accountSettingsBean.newPassword}">
<t:inputText tabindex="25" size="1" disabled="true" style="display: none" />
</t:inputSecret>
It didnt break firefox or chrome. I'm not sure why this would work but it does.
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%;
}
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 :)
Is it possible to style JSF commandbutton tags to look like the following example:
http://www.bloggerswatch.com/internet/css-trick-submit-button-should-look-same-everywhere/
It works for the commandlink/
Yes, you should be able to do something similar using slightly different CSS that incorporates the images as CSS backgrounds rather than <img> tags:
Markup
<div class="buttons">
<h:commandButton value="Button Text" styleClass="apply"/>
<h:commandButton value="Button Text" styleClass="cross"/>
</div>
CSS
.buttons input {
margin: 5px;
padding: 5px 5px 5px 20px; /* 20px makes room for your background image */
border: 1px solid #aaa;
}
.buttons .apply {
background: #eee url(path/to/apply.png) no-repeat 0 50%;
}
.buttons .cross {
background: #eee url(path/to/cross.png) no-repeat 0 50%;
}