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...
I found the document in materialize UI framework with select2 .
when I did not add $("select").selet2(); everything is ok . the page like this:
when I add .select2() function, the page not work well :
the line under select disappeared .
I push my code into github , and here is the repository:
https://github.com/SeasonXin/material-select2-issue.git
hope somebody's support, very thanks ;
Adding the class 'browser-default' to the select element will fix that
I had the same problem, but I found this
https://github.com/nikitasnv/materialize-select2
In the case of labels, enter these styles
style = "position: absolute; top: -14px; font-size: 0.8rem"
Spelling Error.
Use
select2()
^
instead of
selet2()
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
}
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.
I've successfully implemented sIFR3 using the nightlies from the end of Oct. All is well and much easier to work with than sIFR2 except where it comes to line-height.
I was able to deal with my headings fine. But I have a pullquote that needs more line-height/leading and though I've read through support and see that it needs to be applied to the .sIFR-root, it's not working. Is there something funky I don't know about?
Here's my code:
sIFR.replace(fedraBook, {
selector: '.callout p',
css: '.sIFR-root { background-color: #FFFFFF; color: #968b85; leading: 3.5;}'
});
I had the leading at 1.5 but changed to 3.5 just to see if I could get it to vary at all. It does not.
I tried also affecting it with this CSS selector with no joy:
.sIFR-active .callout p {
font-size: 1.6em;
padding-top: 7px;
line-height: 2.5em;
}
Does anyone have any ideas here? What am I missing?
i know my answer is not of much help but I too have had this issue. there is very little documentation on the subject. as far as I know, sIFR does not support true line-height. It uses the height of the flash object and the font-size to set the line-height. http://tests.novemberborn.net/sifr3/experiments/tuning/line-height.html