I have developed a website and am in the process of converting most of the tables over to DataTables. In testing out one of the DataTable features the Print button, I discovered that nothing would print except the Title of the web page. At first I thought it was an issue with DataTables, but after playing around I've discovered that none of my pages seem to want to print. I'm testing with Chrome because it has the Print Preview, but I can right-click on any page in my site and select Print... and I get the same behavior -- only the Title of the web page displays. Has anybody experienced anything like this before? Here's a link to my site:
JCPS DMC
Even on the home page, try right clicking and select Print and you'll see what I mean. Please tell me this is some super-easy that I just don't know about -- some setting that I've overlooked. I will be happy to provide any support information you need, but I don't even know what that would be... :(
Well this is embarrassing...apparently at some point I included a css script in my Master page (the site is developed using asp.net). In the css I had this little gem which was blocking anything from being printed:
#media print {
body
{
visibility: hidden;
border-top: hidden;
width: 50%;
}
.noPrint
{
display: none !important;
}
ol
{
display: none;
}
.printSection, .printSection *
{
visibility: visible;
margin: 1px;
padding: 1px;
}
.printSection
{
position: relative;
left: 0;
top: 0;
}
}
Not even sure why I put that in there, but I removed it and everything is working peachy now...
In my grails application I am using the spring-security-core:1.2.7.3 plugin with the famfamfam:1.0.1 plugin.
When I click on a link that takes me to the web application (and I previously selected the rememberme check box) it takes me to a secured page but no famfamfam images are displayed. In Firefox I can see the following error:
"NetworkError: 404 Not Found - http://localhost:8080/static/plugins/famfamfam-1.0.1/images/icons/user_suit.png;jsessionid=AB8FFF32A22F98573537A965694936AC"
Is there any way that I can prevent the 'jsessionid' from being appended to images?
Thanks!
See this link for a response from the plugin owner: https://github.com/xiaochong/zkui/issues/118.
The issue seems to relate to the resources plugin.
My workaround was to use a blank image in the zk item:
`<z:menuitem label="Home" height="80px;" top="40px;"
href="${createLink(uri: '/')}" image="/images/blank.png" class="menu_house"/>`
And then use a class to add the menu image:
.menu_house {
background-image: url("../images/house.png");
background-repeat: no-repeat;
background-position: left center;
}
I hope that helps to save someone time in the future.
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
I have a page with this code (generated by JSF 2.1.3 running on Glassfish 3.1.1
<a class="pagenumber"
onclick="mojarra.ab(this,event,'click',0,'main:coupon-all main:page-top main:page-bottom');return false"
href="#"
id="main:j_idt221:0:j_idt224">1</a>
This is generated from this part (inside a ui:repeat):
<h:commandLink styleClass="pagenumber">
<f:ajax listener="#{productDetailInfoView.changePage(page)}"
render=":main:page-top :main:page-bottom :main:coupon-all"/>#{page}
</h:commandLink>
Where:
:main:page-top is the ID of the top of the page navigation
:main:page-bottom is the ID of the bottom of the page navigation
:main:coupon-all is the ID of the ui:repeat that lists all the products in the page
ISSUE:
On most browsers (as usual) and also IE 7 and IE 9, everything is just fine. But on IE8 (mostly on Windows XP but probably on Vista/8 too), the browser crashes and reload the page saying it has "recovered" it (sometimes shows the "Crash report" page and ask to send report to MS or cancel).
Additional info:
I actually spent quite a lot of time debugging this, and the issue seems to be in the jsf.js (I use Stage: development to get the full version), in the ajax response part. But I couldn't find which precise part of it because after debugging the jsf.ajax.request(...) part then it's all asynchronous and I got stuck with nowhere to break-point. Sending the request seems ok as the browser crashes when this call completes.
Now the thing is that if I remove one of the element to re-render (either one of the navigation bar or the list of products), the remaining elements are rendered without error. However I need all the 3 elements rendered, not just two...
EDIT: 12/07/05
I found that a highly connected item to the issue is PIE.htc for the round corners. Many of the elements in the 3 blocks I need to re-render have styleClass that use CSS like this:
.round {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url('../PIE.htc');
-khtml-border-radius: 5px;
}
The PIE.htc file is found and round corners are correctly displayed in IE7 and 8 as expected. However it makes the page very very slow on these IE browsers (I don't mind, I have been allowed to remove round corners for IE).
BUT the very weird thing is that if I simply remove all reference to PIE.htc in the CSS, then I still have the error. Maybe the other border-radius are creating issue. I am currently trying to remove any kind of round corner, even for all browsers and see where it leads.
My page is also XML validated.
Any help appreciated...
In my Ruby (1.9.2) Rails (3.0.x) I would like to render a web page as PDF using wicked_pdf, and I would like to control where the page breaks are. My CSS code to control page breaks is as follows:
<style>
#media print
{
h1 {page-break-before:always}
}
</style>
However, when I render the page with wicked_pdf, it does not separate the document into two pages. Is there something else that I must do to get page breaks with wicked_pdf?
For some reason, the "#media print" didn't quite do it. I just went with
.page-break { display:block; clear:both; page-break-after:always; }
for the CSS rule, and then I stuck the following in my page for a page break:
<div class="page-break"></div>
That just worked.
Tried Jay's solution but could not get it to work (maybe a conflict with other css)
I got it to work with this:
<p style='page-break-after:always;'></p>
I had the same problem and I discovered something that might help. This was my page break CSS code:
.page-break {
display: block;
clear: both;
page-break-after: always;
}
This didn't work because of TWO reasons:
I. In one of the SASS imported file I had this line of code:
html, body
overflow-x: hidden !important
II. The other problem was bootstrap
#import "bootstrap"
It looks like because of the float: left in:
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
the page break is no longer working. So, just add this after you import bootstrap.
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: initial !important;
}
None of these solutions worked for me. I did find a solution that worked for many people in the gem issues here - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524
you want to add CSS on the element that needs the page break. In my case, it was table rows, so I added:
tr {
page-break-inside: avoid;
}
Make sure that the stylesheet link tag includes media='print" or media='all' if you are using an external stylesheet:
<%= stylesheet_link_tag 'retailers_pdf',media: 'all' %>
or
<%= stylesheet_link_tag 'retailers_pdf',media: 'print' %>
otherwise wicked_pdf will not pick it up.
Also note that if you are in the middle of a table or div with a border, that the page-break attributes will not work. In this case, it's time to break out jQuery and start splitting things up. This answer: https://stackoverflow.com/a/13394466/2016616 has a good snippet for position measurement. I am working on clean and repeatable table-splitting code and will post it when I have finished it.
i had the same issue and what ended up working for me was to make sure that my element with
page-break: always;
was on the root of the document, seems when its nested inside of other elements, especially ones with height assigned, the declaration gets ignored.
hope this helps someone.