I am facing problem of stabilizing styles in my html page.
Whenever I am using datepicker (jqmobile UI datepicker), the look and feel is affected terribly. The icons on the header, the icons for closing dialog, the icons for type dropdown all vanishes.
Here is my header portion,
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link type="text/css" href="styles/datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery-mobile/styles/jquery.mobile.simpledialog.css" rel="stylesheet" />
<script src="cordova.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mobile/js/jquery.mobile.simpledialog2.js"></script>
<script src="scripts/Common.js"></script>
<script src="scripts/FlightServices.js"></script>
</head>
If I comment out the line:
link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
then the icons appear properly but datepicker style is spoiled.
If I put this line:
script src="scripts/datepicker.js"
instead of :
script src="scripts/jquery-ui.js"
Datepicker is completely disabled.
Is there any mistake I am making in this above mentioned portion?
Any wrong file included?
Anyone any suggestion, I shall be thankful.
Thanks
santu ghosh
The order of style sheets is important.
Change the order of style sheets instead of keeping one or the other. Usually, the themes style sheet template should be added first and then, your own style sheet(main.css) which adds in your own modifications to the base template. Edit your main.css to super-impose major conflicts.
I would also recommend putting the mobile style sheets conditionally for mobile platforms only unless this page is strictly for mobile anyways.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link href="styles/main.css" rel="stylesheet" />
Related
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I am using "live-table edit" plugin from http://preview.jqueryajaxphp.com/livetableedit/ .Everything works perfectly ,However none of my edits are getting saved! What could be causing that? Everything looks fine. When I edit a cell, the briefly "flashes" pale yellow,it shows updated value in cell. But when I submit data updated field still will be having old value.When I checked html source(view-source) showing old value(AAA).
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.min.css">
<link href="media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
$(this).closest('td').children('span').attr('id');
$('.input-sm').val();
$(this).closest('td').children('span');
});
});
Please help me.
I am pushing my static files to a CND for my web application. To do so I've used OmniFaces CDNResourceHandler that works fine. Except, my styles do not follow.
I am mapped as so :
javax.faces:jsf.js=http://.../jsf.js,
primefaces:primefaces.js=http://.../primefaces.js,
primefaces:jquery/jquery.js=http://.../jquery.js,
primefaces:jquery/jquery-plugins.js=http://.../jquery-plugins.js,
primefaces:idlemonitor/idlemonitor.js=http://.../idlemonitor.js,
primefaces-smoothness:theme.css=http://.../theme.css,
primefaces:primefaces.css=http://.../primefaces.css,
styles:main04.css=http://.../main04.css,
This works fine, except that my styles are all off. The rendered result is the same as when theme.css AND primefaces.css are not loaded.
If I remove these resources as being handled by the CDNResourceHandler, the page loads as desired. I can confirm that these files are being loaded by on the page (Inspect Element-> resources in web browser show that these are there and loaded).
Has anyone experienced PrimeFaces styles not working through CDN? Is there a way to get this to work?
My application runs on :
OmniFaces 1.6
Primefaces 3.5
Majorra 2.2
Glassfish 3.1.2.2 (also tried on Glassfish 4)
Edit 1
I have looked into this a bit further and it seems that the css files are not process : something with #{resources[]} within the CSS remains as such. This would be due to the file not meeting the Faces Servlet url-pattern. This leads me to believe to achieve what I am looking for I will need the CND resources to be processed...?
Edit 2
The weird thing is that the generated HTML has all the loaded resources. It just seems that the resources (Primefaces styles) are not processed if loaded via CDN.
This is the resources loaded when the page DOES NOT WORK. Everything is functional, except for the basic styles provided by Primefaces.
<link type="text/css" rel="stylesheet" href="http://.../theme.css" />
<link type="text/css" rel="stylesheet" href="http://.../primefaces.css" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
By removing the Primefaces styles from the CDN, this following generated HTML works perfectly and generates the page as it should.
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" />
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
Just replace the jsf resource lookup by a classic css lookup.
When i externalized my themes this were just two mass-replacements in my ide.
Instead of:
background:url("#{resource['primefaces:colorpicker/images/colorpicker_select.gif']}");
Use:
background:url("images/colorpicker_select.gif");
Or download changed resource and mapping from here:
http://forum.primefaces.org/viewtopic.php?t=38421
I have a <p:download> like this:
<h:form id="form1">
<p:commandButton id="downloadLink" value="Download" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)"
icon="ui-icon-arrowthichk-s" actionListener="#{search.downloadActionListener}">
<p:fileDownload value="#{search.dwnloadFile}" />
</p:commandButton>
</h:form>
It doesn't work. The download button just reloads the page and doesn't show the Save As dialog. After checking every single thing, I came to know that if I remove the <h:head> tag from the page, then it starts to work.
I can't work without <h:head> as PrimeFaces look'n'feel and all ajax functionality depends on it.
Update: the generated HTML <head> with <h:head> is like this:
<head>
<link href="/Project2.0/javax.faces.resource/themes/sam/theme.css.xhtml?ln=icefaces.ace" rel="stylesheet" type="text/css" />
<link href="/Project2.0/rfRes/skinning.ecss.xhtml?db=eAG7mShzEgAFjAIg" rel="stylesheet" type="text/css" />
<link href="/Project2.0/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/primefaces.js.xhtml?ln=primefaces" type="text/javascript"></script>
<link href="/Project2.0/javax.faces.resource/dock/dock.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/dock/dock.js.xhtml?ln=primefaces" type="text/javascript"></script>
<link href="/Project2.0/javax.faces.resource/layout/layout.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/jsf.js.xhtml?ln=javax.faces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/icepush.js.xhtml?v=9261182" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/bridge.js.xhtml?v=9261182" type="text/javascript"></script>
<script type="text/javascript">document.documentElement.isHeadUpdateSuccessful=true;</script>
<style type="text/css">.ice-blockui-overlay {position: absolute;background-color: white;z-index: 28000;opacity: 0.22;filter: alpha(opacity = 22);}.ice-status-indicator-overlay {position: absolute;background-color: white;z-index: 28000;opacity: 0.22;filter: alpha(opacity = 22);}</style>
<script src="/Project2.0/javax.faces.resource/compat.js.xhtml" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/icefaces-compat.js.xhtml" type="text/javascript"></script>
<title>
Project
</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
</head>
and without <h:head> it's like this:
<head>
<title>
Project
</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
</head>
The HTML output of the <h:head> suggests that you're mixing PrimeFaces with ICEfaces. The main cause of your concrete problem is this script from ICEfaces:
<script src="/Project2.0/javax.faces.resource/icefaces-compat.js.xhtml" type="text/javascript"></script>
This basically turns every non-ajax submit button into an ajax submit button. This also includes the download button. But you cannot download files with ajax.
Remove ICEfaces altogether. You don't need it. It's basically a clone of PrimeFaces 2.x. But if you're already using PrimeFaces 3.x, then ICEfaces has utterly no additional value. Perhaps it was a leftover from previous experimenting with various JSF component libraries.
See also:
ICEfaces libary in classpath prevents Save As dialog from popping up on file download
Unrelated to the concrete problem, the HTML output also suggests that you're also having RichFaces in the runtime classpath. Whilst that should theoretically work fine together with PrimeFaces, I wouldn't recommend mixing them. RichFaces has in essence nothing which PrimeFaces doesn't already offer.
When I try to set the title of a view page using the title tag I got this title on the page body and I found the head tag to be empty. Here is the head of the page:
<head>
<meta name="layout" content="main">
<title>Implementation Error</title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'errors.css')}" type="text/css">
<r:require modules="bootstrap"/>
</head>
When the page get rendered I got the following:
<body>
Implementation Error
<script src="/accountcontrol/static/plugins/jquery-1.7.2/js/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="/accountcontrol/static/bundle-fixtaglib_head.css" type="text/css" rel="stylesheet" media="screen, projection">
<link href="/accountcontrol/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="screen, projection">
<link href="/accountcontrol/css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/accountcontrol/static/js/lputil.js"></script>
</body>
what is going wrong with that?
Thanks,
I had this exact same issue with Grails 2.2 and it brought me here. After a lot of yak shaving, I found out that you need to look in your main.gsp layout file and actually wrap the layout title tag in a title tag like so:
<title><g:layoutTitle/></title>
Once I did this, the problem went away. I must have looked at this page a million times and not seen that.
Check your "main" layout and make sure that "g:layoutTitle" tag defined in head section. For more info see layoutTitle docs.