i want to override the below css to the title attribute in h:outputText.
css:
<style type="css/text">
.title
{
border : 1px solid #FF9933;
font-family : verdana;
font-size : 14px;
font-weight:normal;
color: #000000;
background-color:#fae6b0;
padding : 5px 5px 5px 5px";
}
</style>
<h:outputText id="userName"
value="#{userBean.userName}"
title="#{userBean.userName}"/>
<h:outputText id="userAddress"
value="#{userBean.userAddress}"
title="#{userBean.userAddress}"/>
With the help of below link. I tried to change the title attribute in html, it works fine.
How to change the style of Title attribute inside the anchor tag?
how to apply the same thing into the richfaces.
The tooltip as represented by the HTML element's title attribute is not styleable by CSS. The style is fully controlled by the webbrowser and is usually represented in client operating system platform default tooltip style. So, e.g. when the client is running Windows 7, then the tooltip will be presented in Windows 7 default style. Again, you have no control over this.
Your best bet is to replace the title attribute by a fullworthy HTML <div> which appears/disappears on mouseover/out. This allows full control over styling by the usual CSS means. As you already know, RichFaces has a <rich:tooltip> component which does exactly that. If it is insufficient for you for some reason, then you may want to consider to look for another JS/jQuery plugin which will automagically convert all title attributes to styleable <div> elements. One of them is qTip. All you need is then basically:
<h:outputScript name="scripts/jquery.qtip-1.0.0-rc3.min.js" target="head" />
<h:outputScript target="body">$("[title]").qtip();</h:outputScript>
(provided that you're using a RichFaces version which already ships with jQuery bundled, so that you don't need to manually include jQuery)
Related
I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).
I am using p:galleria tag as follows:
<p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
<p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>
The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here:
What can be the reason, how can I solve it?
My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :
https://github.com/alexmivonwien/pf.gall.git
After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:
1.) My own generated HTML and CSS:
note that the first "li" child under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the CSS style (there is no display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px;">
2.) The HTML and CSS on the primefaces showcase:
Note that the first "li" element under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the css style (there is a display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria
The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...
Effectively this problem is all plain css html related and nothing PrimeFaces specific.
I would like to know if there is a method to label and rename the text displayed by JSF Choose a File when I'm using the tag <h:InputFile> in JSF.
That's not possible with native HTML. The appearance and the button's label is browser-dependent. The particular "Choose File" label is recognizable as the one from Chrome with English language pack (e.g. FireFox uses "Browse..."). As JSF is in the context of this question just a HTML code generator, it can't do much for you either.
There are several ways to achieve this. All can be found in this HTML+CSS targeted Q&A: Styling an input type="file" button, particularly this answer.
Easiest way is to reference it via <h:outputLabel for>, style it to look like a button and hide the actual file upload component. Clicking the label element will as usual just delegate the click event to the associated input element. See also Purpose of the h:outputLabel and its "for" attribute.
Here's a non-IE compatible kickoff example (it's supported in IE's successor Edge):
<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />
label.upload {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 2px;
cursor: pointer;
}
input.upload {
display: none;
}
If you'd like to support IE9+ too, replace appearance: button by a background and border. It's only harder to get it to look like a true button. The below is far from ideal, but should at least get you started.
label.upload {
padding: 2px;
border: 1px solid gray;
border-radius: 2px;
background: lightgray;
cursor: pointer;
}
If you'd like to support IE6-8 too, which won't delegate the label's click event to the hidden input element, then well, head to the aforementioned related question for CSS tricks on that and rewrite JSF code in such way that it generates exactly the desired HTML+CSS(+JS) output.
A completely different alternative is to grab an UI oriented JSF component library, such as PrimeFaces which is based on jQuery UI. See also its <p:fileUpload> showcase.
I have simple treeTable. http://www.primefaces.org/showcase/ui/treeTable.jsf
I want to change expand and collapse icon of this treeTable. How can I do that?
If you want to use custom icons (images), override the following CSS classes for their respective uses, on the treetable:
ui-icon : to customise the expanded-row state icon (the triangle)
.ui-icon {
width: 16px;
height: 16px;
background-image: url("/your-image-here");
}
ui-icon-triangle-1-e ui-c : to customize the collapsed-row state icon
If you want to use more modern fontAwesome 'icons', see Change icon from jQuery UI to FontAwesome in PrimeFaces
I am currently doing the menu of a web application and I would like to use a different theme for that menu from the theme I use for the rest of the application.
I use PrimeFaces' default theme, though it could change later, and a custom theme for the menu, that I made with the jQuery theme roller (http://jqueryui.com/themeroller)
I would like to apply this theme on the main menu only, which is defined in a CSS file :
#top {
position: relative;
background-color: #333367;
color: white;
padding: 2px;
margin: 0px 0px 2px 0px;
max-height: 60px;}
I can apply the custom theme to the entire application using
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>custom-theme</param-value>
</context-param>
But it isn't applied to a particular area
The menu is defined here in my template :
<div id="top">
<ui:insert name="menu">
<ui:include src="../snippets/menu.xhtml"/>
</ui:insert>
</div>
Does anyone has a suggestion to use the custom theme only for the menu?
Thanks
You're really looking to combine two themes into one (or to partially combine two themes). You can't do this just with the themeroller, but you could extract the relevant parts of your custom theme and add #top to the selectors. So where the generated theme might have
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
...
You'd edit it to be
#top .ui-state-default a, #top .ui-state-default a:link, #top .ui-state-default a:visited {
...
Potentially a lot of work and not very efficient, but the way jQuery UI themes are set up, they apply the same styling to all the elements
I am working on validation of a user registration form. What JSF tags can I use to add special characters and background color to that registration form?
Try this it forms unique tags for you in input field:
http://xoxco.com/clickable/jquery-tags-input
http://plugins.jquery.com/plugin-tags/tags
I'm not sure what you mean with "special characters", but I assume that you mean "special fonts" or something. In general, to style a webpage you should use CSS. You can set the font type by font-family property and you can set the background color by background-color property.
First create a style.css file with the following content:
.yourFormClass {
font-family: arial;
background-color: pink;
}
Then put it in public web content (there where your JSF pages also are) and then declare it in the <head> (or <h:head> if you're using JSF 2.x):
<link rel="stylesheet" href="style.css" />
Then you can use the styleClass attribute of any containing JSF component to let JSF generate it as class attribute in the final HTML element.
<h:form styleClass="yourFormClass">
(open page in browser, rightclick and "View Source" to see it)
To learn more about CSS (which is a completely separate subject from JSF), check the CSS tutorial. Keep in mind that JSF is basically just a HTML code generator.