I am using the latest jsPDF (2.1.1), html2canvas (v1.0.0-rc.7) and the .html method. I tried to achieve a page break by adding the following CSS style on a DIV
page-break-before: always
but without success.
My search resulted on conflicting information on whether the above should work.
Any help will be great!
Related
I'm using CKEditor via the 'rich' gem for Ruby on Rails.
It has historically worked fine, but at some point my editor icons started looking like this:
I'm not sure what caused was, whether I upgraded something or what.
(I do know that it's not a browser-cache issue.)
How I can fix these icons?
The code:
This is the HTML for the Bold button's span element (whitespace added for readability):
<span class="cke_button_icon cke_button__bold_icon"
style="background-image:url(http://localhost:5000/assets/ckeditor/plugins/icons.png?t=E4KA);
background-position:0 -24px;
background-size:auto;">
</span>
And the styles as interpreted by Chromium:
In that last line, url(icons.png) actually resolves to http://localhost:5000/assets/ckeditor/skins/moono/icons.png
What I can see but don't know how to resolve:
There are two different icons.png files at play here:
<gem_path>/vendor/assets/images/ckeditor/plugins/icons.png
(works correctly with background-position offset -24px)
<gem_path>/vendor/assets/images/ckeditor/skins/moono/icons.png
(is calibrated for a different offset value)
In the code snippets, you can see that the CSS specifies offset -24px, thus the first image is the correct one. The inline-element style specifies the first image, but is overridden by an !important-ified url(icons.png) which loads the second image (which is wrong).
Why the heck is it doing that?
Can I somehow fix this without forking the gem? (I can fork the gem, but I'd rather not maintain a separate fork if possible.)
Add below CSS in the application.html.erb file
.cke_ltr .cke_button_icon {
background-image: url('/assets/ckeditor/plugins/icons.png?t=H5SC') !important;
}
I'm using Swagger(Swashbuckle) as the documentation tool for our Web API project. I'm able to customize index.html using customized css file.
Everything's works great, except, I want to add our company's specific logo in the index page & I couldn't get it to work.
Suggestions ??
I realize this is an older question, but I just ran into this today. If you want to embed an image file, you can do it similar to how you do for the css and index file.
Add a line in the SwaggerConfig like the following:
c.CustomAsset("mylogo", thisAssembly, "YourWebApiProject.SwaggerExtensions.mylogo.png");
You can then reference that file either in your modified css or custom index page by using <img src="mylogo" /> in your modified html or url(../mylogo) for the path if using it in your custom css file.
Similar to your index and css files, make sure it's set as an embedded resource.
What about including this in your CSS:
.swagger-section #header a#logo {
background-image: url(path/to/my/logo);
}
In my ASP.NET MVC 4 app, I have an index view that has several partial views embedded in it. I installed latest version 1.6.1 of Rotativa via NuGet. Now I can print the index page to a PDF using Rotativa. I would like to have a page break in the PDF after every partial view. How can this be achieved using Rotativa?
I tried to follow this example to use CustomSwitches but there does not seem to be one for page break. I used this article to generate the PDF
If you are using 1.6.1 you can just add the page breaks in the CSS (this does not work consistently in 1.5.0, I have not tested 1.6.0)
So add this style, not to a specific element like p.breakhere{...} but as shown below (some folks had issues on a specific element)
<STYLE TYPE="text/css">
.breakhere { page-break-after: always }
</STYLE>
Then in your html just do this
<P CLASS="breakhere">
And it should break nicely. Do be aware that 1.6.1 has a bug with Ghosted images, intermittently...
See this SO entry Link
The answer is correct but you have to do it in a different manner like:
<div style="page-break-after: always;">Content before page breaks</div>
<div>Content after page breaks<div>
This does the trick!
Hope that helps!
You can use any of this three CSS code to set the page break for an element,
page-break-after
page-break-before
page-break-inside
According to your situation.
This works every time for me and in all browsers. My application is ASP.NET MVC3 Razor.
In your style sheet (.css) or in a style tag put this:
#media all { .page-break { display: none; } }
#media print { .page-break { display: block; page-break-before: always; } }
Where you want your page to break put this:
<div class="page-break"></div>
Works perfect in all browsers
I found 1.6.1 works locally, but hosted on 2012 R2 windows, a QT 6.2 incompatible version breaks the generation of the application so this was not the solution for me. Instead, i ended up forcing a large margin-top in my css and then that actually forced my content to the top of the next generated page consistently, and therefore achieved my requirement. Strange, but it worked.
Qt: Untested Windows version 6.2 detected!
Error: Failed loading page https://a.b.co.uk/c/d/1(sometimes it will work just to ignore this error with --load-error-handling ignore)
Added this and it force made my new page for the content i needed it to...
<div class="row-fluid page-break" style="margin-top: 800px;">
I think a page height in pixels is 824px, so this pushes it over. It's a workaround, but i've just spent a few hours trying to get this to work, and was about to change Rotativa for another solution, but this was a easier option.
I am trying to dynamically create divs in my Rails app through javascript. However, the divs background images are not linking correctly. I know that Rails will search through images for preloaded css files. For instance, in my main css file I simply have
html, body{
background-image:url('bg.png');
}
However, when I create divs dynamically with the following code.
$("<div>").addClass("icon").css("background-image", "url(" + this.model.get('icons')[i] + ")").appendTo(this.el);
It doesn't find the images. Do I have to use relative urls such as '/assets/images/...'?
Any help is very much appreciated. Thanks!
The stylesheets don't work the same way as template files.
You need to put a full path in them for images try:
background-image:url('/images/bg.png');
It turned out that I had to set the background image to
$("<div>").addClass("icon").css("background-image", "url('/assets/icon_genes.png')").appendTo(this.el);
So apparently, Rails stores all images in just /assets/ as opposed to /assets/images/.
How to display a HTML file from my system in iframe using rails?
I will explain my issue...
I have a view file that has an iframe which calls an action through <iframe src="controller/action?param=somevalue"></iframe> and the action renders a HTML file based on the params.
The HTML file called has reference to stylesheets and javascripts in the format <script type="text/javascript" src="../common/About.js"></script>
When viewed in browser the HTML file displays correctly with the styles and javascript but when viewed in the application the styling and scripts are not working from the external file. On viewing the source code for the external files i get "Unknown action" error.
What is that i am doing wrong in this?
(reacting to yr last comment): you need to specify css and js files in the iframed html page separately. html in an iframe is rendered completely independent from the surrounding page.
This is not a rails-related question imho.
I found the mistake I made. Its because of routes being not defined properly. When I give relative urls in the html file, the rails views assumes the full path to be some thing like src="controller/common/About.js". As there is no action defined by the name common I was getting the Unknown action error. I have redefined my routes and its working fine now.