I have the page which has the following tags:
<h:head>
<h:outputStylesheet name="style.css" library="css" />
</h:head>
and some kind of dataScroller:
<rich:dataScroller for="productsList" id="scroller" maxPages="10">
Now I'm trying to override dataScroller default css style by adding
.rf-ds { background: black; }
in my style.css file.
I don't see any changes. When I open firebug I see both .rf-ds classes one is coming from my css and is disabled and second one is default dataScroller class.
How can I override default class?
try to add !important to your css like this:
.rf-ds { background: black !important; }
see
http://www.electrictoolbox.com/using-important-css/
Try <link rel="stylesheet" type="text/css" href="/resources/css/style.css" /> in your <head></head>
.From what I have seen, RichFaces loads CSS attached with <link> after it has loaded its own CSS, giving your CSS precedence.
In our project we needed to customize a lot of components's css and IMHO adding !important is not such an elegant solution (its more like a hack). Hence we took this approach.
Related
i am using ready-made template(with css and j-queries) in my java ee app. all the primefaces components are rendered properly except the panelgrid control of primefaces 3.2.
it is displayed with border. i want it without border.
i have removed all the table styling from the css of custom ready-made template.
still the border is there.
when i remove the readymade template, the panelgrid is rendered perfectly without any border. how do i remove the border and what is the cause of this problem?
edited:
xhtml file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AP administration panel - A massive administration panel</title>
</h:head>
<h:body>
<div>
<h:form>
<p:panelGrid columns="2" style="border: none">
<h:outputText value="scrip symbol"/>
<p:inputText value=""/>
<p:commandButton value="submit"/>
</p:panelGrid>
</h:form>
</div>
</h:body>
</html>
When overriding PrimeFaces default styles, you have to specify a CSS selector of at least the same strength or to specify a stronger selector. The strength of a CSS selector (the cascading rules) is specified in the W3 CSS specification and clearly explained in this article: Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade.
Based on PrimeFaces own CSS, the following selectors should do:
.ui-panelgrid tr, .ui-panelgrid td {
border: none;
}
Just put them in a .css file which you include by <h:outputStylesheet> inside the beginning of the <h:body> so that it will be included after PrimeFaces own style.
<h:body>
<h:outputStylesheet name="layout.css" />
...
</h:body>
See also:
How to remove border from specific PrimeFaces p:panelGrid?
How do I override default PrimeFaces CSS with custom styles?
Update: As per your update, your CSS doesn't seem to be loaded at all. You should have noticed this by verifying the HTTP traffic in browser builtin webdeveloper toolset (press F12 in Chrome/IE9/Firebug) and seeing that it returned a HTTP 404 error. When using <h:outputStylesheet> you need to put the CSS file in the /resources folder of the webcontent. So you must have a /resources/css/mycss.css in order to be able to use <h:outputStylesheet name="css/mycss.css" />.
See also:
How to reference CSS / JS / image resource in Facelets template?
I've just installed grails rendering plugin and would like to use it for generating PDF files. I've created simple template, but it is exported without any css styles. If I simply render template from grails, then page appears with all styles in my web browser.
So, my question is - how to correctly include CSS file during PDF generation process?
My template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="stylesheet" href="${resource(dir:'css',file:'webui.css')}" />
<r:layoutResources/>
<title>Report</title>
</head>
<body>
<div id="content">
<div id="center-container">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<table>
<thead>
<tr>
<th class="trip">trip</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>
${tip}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
And I have style .odd in my webui.css, but it is not applied on the row.
Any help would be appreciated.
Edit1: I found out that styles are fetched, if I do it in the following way:
<link rel="stylesheet" href="my_appname${resource(dir:'css',file:'main.css')}" />
But I don't want to hardcode application name (this is also a base context path). Is there a better way to generate proper link to a css file?
It may be late with my answer but I wanted to share my experience here with rendering pdf in grails. I followed the below steps and failed over to the next until I get a pdf:
Used the resource plugin in the template gsp to grab a module where css was bundled.
For example:
Test.gsp
<html>
<head>
<r:require modules="bootstapApp"/>
<r:layoutResources/>
</head>
<body>
....
<r:layoutResources/>
</body>
</html>
The above worked fine but the styles were not used in the pdf after rendering. I had to fall over to step 2.
2.Started using tag as mentioned above in the problem statement.
Result: No change. I wasn't able to get the styles in the pdf.
Failed over to step 3
3.Added the styles inline in the template gsp. And then I was able to apply them to the pdf. Point to note here is that if you follow step 3 and you have css like bootstrap.css then inlining them in the template will be cumbersome. Even if we add them, do not forget to put them inside the media tag. For me the below worked perfectly fine:
<style type="text/css">
#media all {
//CSS styles goes here
}
</style>
Try setting grails.serverURL in Config.groovy to the app url (ex. grails.serverURL=http://localhost:8080/appname). The plugin resolves all relative links via this setting
I shared my answer elsewhere, but I ended up just embedding the external file contents into the gsp for pdf rendering:
https://stackoverflow.com/a/32767378/1599616
I'm quite new to using JSF and I'm not sure if that's the right way to go, but in Rails you usually have a main application file into which the current page is loaded. That way I don't have to worry about copy-pasting the menu, etc. every time.
How can I achieve that with JSF 2? Can I navigate to the same main page every time and tell it to load a current content? Or do I tell the current page that I navigate to to load the "main frame around the content"?
Thanks!
Yes of course, JSF 2.0 has page-templating feature. You define a template that defines a generic layout to all the view pages.
Facelets tags to create basic page:
ui:insert – defines content that is going to replace by the file that load the template;
ui:define – defines content that is inserted into tag ui:insert;
ui:include – includes content from another page;
ui:composition – the specified template is loaded, if used with template attribute, and the children of this tag defines the template layout. In other case, it’s a group of elements, that can be inserted somewhere.
For example:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/myLayout.xhtml">
<ui:define name="menu">
<ui:include src="/mypath/menu.xhtml"/>
</ui:define>
<ui:define name="content">
<ui:include src="/mypath/content.xhtml"/>
</ui:define>
</ui:composition>
or
<ui:insert name="content">
<ui:include src="/mypath/mycontent.xhtml"/>
</ui:insert>
JSF doesn't support what you want to archive. Instead, it support the views and basic layout(template). What you need it this:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
template="path/to/template.xhtml>
<your custom content here/>
<ui:composition/>
I implemented a jsf 2.0 component which should display jQuery's Datepicker. It works just fine but the images referenced in the css are not found. The *.js and the *.css are found but the links to images are not.
Here's the code of my component
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:cc="http://java.sun.com/jsf/composite">
<head>
<title>jQuery - Datepicker</title>
</head>
<body>
<cc:interface>
<cc:editableValueHolder name="input"/>
</cc:interface>
<cc:implementation>
<h:outputStylesheet library="stats" name="jquery/css/jquery-ui-1.8.16.custom.css" />
<h:outputScript library="stats" name="jquery/js/jquery-1.7.1.min.js" target="head"/>
<h:outputScript library="stats" name="jquery/js/jquery-ui-1.8.17.custom.min.js" target="head"/>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq("[id$=#{cc.clientId}]").datepicker({
showOn : 'focus',
duration : 10,
changeMonth : true,
changeYear : true,
dayNamesMin : ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
currentText : 'Heute',
dateFormat : 'dd-mm-yy',
yearRange : '-3:+3',
showButtonPanel : true,
closeText : 'Schliessen',
});
});
</script>
<h:panelGroup>
<h:inputText id="#{cc.clientId}" value="#{cc.attrs.value}" style="width:80px;"/>
</h:panelGroup>
</cc:implementation>
</body>
</html>
in the css the images are references like this (jQuery css):
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url('/stats-webapp/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url('/stats-webapp/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_f6cf3b_256x240.png); }
My Filepath is following
datepicker.xhtml -> src/main/webapp/resources/stats/datepicker.xhtml
javascript files -> src/main/webapp/resources/stats/jquery/js/jquery*.js
css files -> src/main/webapp/resources/stats/jquery/css/jquery*.css
images -> src/main/webapp/resources/stats/jquery/css/images/.
Even if i reference those images inside the css path with absolute paths my browser won't find it (when i start the chrome developer tools, i cannot find the files either)
Thanks for the help
You're serving the CSS file as a JSF resource. It will be served from /javax.faces.resource folder in URL and it will also get the FacesServlet mapping like /faces/* or *.xhtml in URL. It would make the path-relative CSS background image URLs invalid. You'd need to alter the CSS backgorund image URLs accordingly to be served as JSF resources as well. The canonical approach is to make use of the resource mapper in EL #{resource}:
.some {
background-image: url(#{resource['stats:jquery/css/images/foo.png']});
}
An alternative is to use OmniFaces UnmappedResourceHandler so that you don't need to modify the CSS files.
Again another alternative is to grab a JSF UI component library which has already a jQuery based date picker based component in its assortiment, such as PrimeFaces <p:calendar>.
We can't know how your server's folder structure is set up, but try adding a leading a leading slash to your file paths "/images etc."
I need to make a link which opens print version of current page in a new tab. I already have correspondent css-file. But I don't know how to specify when this file should be used instead of standard.
The simplest way is quite good. If I was using JSP I would simply add get parameter to print-link URL. Is there any way to achieve similar results with jsf?
Use EL to specify the CSS file dynamically, here's an example which checks the presence of the print request parameter (thus, <h:outputLink value="page.jsf?print" target="_blank"> would suffice):
<link rel="stylesheet" type="text/css" href="${not empty param.print ? 'print.css' : 'normal.css'}" />
You can also retrieve it as a bean proprerty the usual JSF way:
<link rel="stylesheet" type="text/css" href="<h:outputText value="#{bean.cssFile}" /> " />
If you're on Facelets instead of JSP, then you can also use unified EL in template text:
<link rel="stylesheet" type="text/css" href="#{bean.cssFile}" />
If you actually don't need a "print preview" tab/page, then you can also just specify the media attribute in the CSS link and let the link/button invoke window.print() during onclick instead of opening in a new tab.
<link rel="stylesheet" type="text/css" href="normal.css" media="screen, handheld, projection" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
When the page is about to be printed, the one specified by media="print" will automatically be used instead.
You can add get parameters to any JSF link by using the f:param tag.
<h:outputLink value="/somepage.xhtml" target="_blank">
<h:outputText value="Link to Some Page"/>
<f:param name="someparam" value="somevalue">
</h:outputLink>
This will render something basically like this:
Link to Some Page
You can add multiple params with more f:param fields. Alternatively, if it's static, you can just add it as part of the outputLink itself.
<h:outputLink value="/somepage.xhtml?someparam=somevalue" target="_blank">
<h:outputText value="Link to Some Page"/>
</h:outputLink>
The problem, of course, being that you cannot do this and trigger server-side events. I've yet to figure out how to do this from a POST back and get it in a new tab.