I am using wkhtmltopdf 0.12.3.2 on Windows.
I know there are a lot of questions and answers around this topic, but I still can't find an answer to my problem; I don't know where to put the according CSS - or the CSS doesn't work for some (other) reason:
for example i tried to put the page-break related CSS directly into my html file which i want to render. i tried to force page-breaks with <span class="break_here"></span> in my <body>:
<!-- ... -->
<head>
<style>
span.break_here {
page-break-after: always !important;
}
</style>
</head>
<!-- ... -->
this didn't do anything.
then i also tried to put it into #media print{} or #media screen{} which did not change anything either:
<style>
#media screen{
span.break_here {
page-break-after: always !important;
}
}
</style>
thanks for any help!
edit: there is even another possibility by adding the --user-style-sheet option for using an external stylesheet.
Adding pagebreaks via a standalone element in wkhtmltopdf has caused me problems as well.
I've found that applying the pagebreaks to an element which wraps the contents to be much more reliable.
This doesn't work so well:
<div>some content</div>
<div class="pagebreak"></div>
Whereas this does the trick:
<div class="pagebreak">some content</div>
To make this work, I did not use .pagebreak{page-break-after: always!important;}
But, instead used: .pagebreak{page-break-inside: avoid!important;}
It's also good to note that pagebreaks on print should be as high-up in the dom-tree as possible. Applying pagebreak rules to elements that are deeply nested can cause headaches (or at least has for me in the past)
Hope this helps!
Related
I'm using Chrome v99 and a pretty basic usage of break-inside: avoid - but it does nothing.
Moderator: This is not a duplicate of this post and the 1 answer there isn't helpful.
My objective is to disallow the contents of all these divs from splitting at page breaks:
<div class="opt">
Here is my inline css:
<style media="screen" type="text/css">
#media print {
div.opt, table {
break-inside: avoid !important;
}
}
</style>
The full html is a bit lengthy but you can view the entirety here.
Simply press CTRL+P and observe that it page-breaks in the middle of divs with a class of opt - but it shouldn't because I'm using break-inside: avoid.
The example I linked to is very short and contrived, but my real scenario has many more sections and is dynamic, pulling from a database. So there's no way to know where the page is going to break relative to the divs. I just want the contents within those divs with that class to always stay together on the same page and never split across a page break. No div contents ever exceed a page, they are even shorter than my example.
Help, what am I doing wrong?
You have media=screen in the style tag...
Your print styles will only load when you're using a screen and not a printer
<style media="print" type="text/css">
div.opt, table {
break-inside: avoid !important;
}
</style>
When you fix it though it still seems to wrap onto multiple pages uglier but at least now you can play around with what print styles work
Thanks in advance for your time and assistance!
I'm trying to edit the header image on a Wordpress Theme with little luck. It seems to be an "in-line style" which I haven't encountered before. I've searched quite a bit but nothing seems to be working for me, including using important! (though perhaps I'm using it incorrectly).
All I'm trying to do is change the background-size:cover to background-size:120% so the image scales better on smaller screens. Right now it chops my face in half when viewing on mobile which is not ideal.
<div id="custom-header" style="background- image:url(http://brentbareham.com/wp-content/uploads/2016/09/HeaderImage.jpg);background-size:cover;">
<div class="container">
<div class="header-content">
</div><!-- .header-content -->
</div><!-- .container -->
</div>
This is the first theme I've ever edited a theme extensively. I'm using a child theme, not that that should matter, and I've been successful thus far but I can't seem to figure this one out.
So you can see exactly what I'm looking at, the website is http://brentbareham.com
Thanks again!
So long as the inline style does not have !important on it, you can use straight css !important to accomplish what you want:
#custom-header {
background-image: none !important;
}
Here is a jsFiddle that demontrates that it works.
using jquery you can override image
myscript.js you can add theme js folder
jQuery(document).ready(function(){
jQuery("#custom-header").removeAttr("style").attr("style","background-image:url(http://brentbareham.com/wp-content/uploads/2017/Image.jpg)");
})
in theme functions.php
function js_head_scripts() {
wp_enqueue_script( "headerjs", get_template_directory_uri()."/js/myscript.js" );
}
add_action('wp_head', 'js_head_scripts');
You have to use JavaScript to override inline styles. Because of the browser render order, it's the inline styles that get higher a higher importance. So in order to restyle that you have to use JS. This however will cause a reflow i.e. the page will be redrawn which looks like a flicker.
Here some good info to know.
How the Browser Works
Update
Sorry. #Cale_b is correct. the code that you show does not have !important assigned to any of the styles. So there are a couple of things.
1). I am not sure if it is a typeo, but you have a space in the HTML code that you have posted here.
<div id="custom-header" style="background- image:url(....
<!-- should be -->
<div id="custom-header" style="background-image:url(....
2). Changing the background-size to "contain" will probably give you the affect you are looking for. It will constrain the image inside of the div element. No JS needed.
3). You may want to try this.
div#custom-header[style]{
background-size: contain;
}
CSS3 background-size Property
I am sorry beforehand if question is stupid, but this is my first project.
I got html.css layouts from HTML/CSS-coder, and for each view they made separate html and separate CSS file.
But I am developing SPA, so there will be one page as an entry-point. Obviously, it should contain all CSS files for all views. The problem is that some of the CSS files contain classes with the same name, but different content. So if I just put list of CSS files in the entry html, some views become a mess, because they use wrong classes.
Thanks a lot.
As I see that my question is not being understood, I decided to give example:
File1.css, used in view1:
.class1 {
cursor: default;
}
File2.css, used in view2:
.class1 {
cursor: pointer;
}
Obviously, I need both as is and cannot use !important; as this will make a browser to use only one of them in both view1 and view2.
What is correct approach to solve this? Ask html coder to re-name classes, or do it myself? Or is there some tool that can somehow consolidate CSS files automatically?
Also, how usually html/css layouts should be coded for SPA to avoid this situation?
UPDATE 1
I appreciate efforts the SO community made to help me though question is indeed could seem vague. I've already learned a lot from all answers.
The situation is much clearer for me now.
The problem in many projects such as yours is that developers do Not do what they are supposed to be doing in standard manner. The correct approach to manage CSS Files in more than 500 lines of CSS Code is to follow Modular, Structured Patterns such as BEM. These Standards guid you through the right choice for the naming conventions and writing Css Components.
For example in Twitter Bootstrap they use components and utilities to manage large projects and avoid such collisions.
Your way to get out of it
You have always the chance to write your styles inline inside the html code. This would bring a high specificity and will override Clas Based CSS of the files included.
You could provide a .css file of your own and include it after all that developre's css and !important all the mess or with the help of high specificity like ids make your CSS win!
Forget about the whole CSS They provided you and start using a framework like Twitter Bootstrap or Zurb Foundation.
Yes you are going to have to go in by hand and re-code the classes. Additionally You can add id's or an extra class to whatever section you are currently styling.
For example: <div class="CSS-coder" id="myExtraStyles"> or <div class="CSS-coder myExtraStyles">
!important will override most styles. But it would be better to edit the current classes that wont be sharing style attributes.
Additionally remember that "Cascading" means from top to bottom. So any styles loaded after the default styles will override the styles loaded before it.
I agree with the other poster in that a "framework" is the way to go.
Good luck with your project.
If I understand correctly, it seems as though you need to use parent / child selectors depending on which view it is:
file1.css:
.view1 .class1 {
// Styles
}
file2.css:
.view2 .class1 {
// Styles
}
To achieve this, look at each view and see if there's a top-level element you can append a class to, such as the <body> tag:
<body class="view1">
<div class="class1">
AND
<body class="view2">
<div class="class1">
This removes any need for !important (stay away from that as much as you can!)
EDIT
Re-reading your question I think I have a better idea now as to what your actual problem is.
What you can do is to find or add a parent element that you can use to filter out the styles.
Let's say you link to those 2 CSS files and both of them define a style like so:
/* First CSS file */
.sub-div {
background-color: red;
}
/* Second CSS file */
.sub-div {
background-color: blue;
}
On your HTML, look for a parent element that you can use.
<div class='red-only'>
<div class="sub-div"><p>View 1</p></div>
</div>
<div class='blue-only'>
<div class="sub-div"><p>View 2</p></div>
</div>
Create a custom CSS (you should link to the file last).
.blue-only .sub-div {
background-color: blue;
}
.red-only .sub-div {
background-color: red;
}
When working with css, the order is important.
The file that is declared last will have the highest precedence.Now with that in mind if you have
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
Then the code specified in file2 will override the code in file1, only if they have the same specificity. Meaning that the more specific declaration will trump even if it is declared in file1. So if you want to override a rule in file1 you will need the exact same declaration in file2.
When working with files created by others like bootstrap or similar it is preferable to create a new file.
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
<link href="myStyle.css" rel="stylesheet" type="text/css">
This will help you avoid trouble that might arise from modifying the originals.
The code inspector in chrome and firefox will be helpful when you need to check wich classes are applied to a certain element.
It might be that your element is applying a class that overrides the one you are trying to apply to the element. For example:
<div class="class1 class2 class3" ></div>
Class3 might override parts of class1 and class2, because it is the class applied last. Like i said, in CSS order is very important.
Do not use !important if possible. You might want to override values later on, and with !important will become difficult to do so. Verify if there are !important declarations in file1, because these might be the ones causing you trouble.
Are you using a programming language? Or just CSS/HTML markup? If you use a programming language (what I suppose, as you got one entry point) you could simply make a big switch statement, check the current view and then inject accordingly the appropriate css file.
Hello all I am trying to work through (learn) MVC3 and I was playing aroudn with formatting my view using CSS. When using html / webforms have been able to use div tags and apply to that div teh approiate css style.
When using MVC adn creating the layout in my view I have found that multiple CSS styles are not being inheritted.
for example: (sorry for the image but razor syntax seemed to fail on the code cut/paste
In the above I had a div tag for certain sections. however when I used the class property
<div class="myfirststyle" >some content</div>
for each of these div tags only the first one would be detected. The remaining div tags seemed to inherit from the main body style. also defined in the main CSS file.
Can anyone point me to some information on how to setup and style div tags within a view using CSS instead of the stylel property as shown in the above image OR is this correct as you cannot directly call CSS styles from a view as they are only recognized by the page layout.cshtml or masterpage?
Thanks in advance
Update: to help troubleshoot what is happening please refer to the following
Code within the view (using razor engine)
code within the CSS
output from developer toolbar notice how first div layer attributes are detected
output from developer toolbar notice now how image div does not have a style applied
What is interesting is that when viewing the source in html you can still see the CSS tags within the DIV tags they are just not being picked up or inherited for some reason after the first node/div tag
Thanks again for any pointers
Definitely not the case. Something else is going on.
Did you include your CSS file in the view or it's master page?
<link href="#Url.Content("~/Content/YourCSS.css")" rel="stylesheet" type="text/css" />
Or manually add the CSS to your view?
<style type="text/css">
div.myfirststyle { ... }
</style>
If so, have you confirmed the spelling of classes? Typos happen, and we can't see from your image whether or not you added classes to divs. Add some of your code even if you can't format it well enough :)
There is definitely something else funky going on... it has nothing to do with MVC*, it occurs when the browser tries to render it, so the problem must lie with the html & css.
If would recommend validating your HTML and CSS, this will show errors with missing closing tags or anything of the likes that can cause these sorts of errors.
I would recommend using Firefox or Chrome with the Web Developer Toolbar to make html & css validation easier.
*nothing to do with MVC directly... indirectly, sure.
Unfortunantly the error was all on my part. While I did have an error withiin my CSS file regarding the use of the position attribute within my styles. below is the updated style:
.resultController
{
position:static;
width:90%;
border: 1px solid #7C90BE;
margin:5px;
}
.resultImage
{
display:table-cell;
color:Green;
height:36px;
width:36px;
}
.resultContext
{
display:table-cell;
padding:3px;
left:50px;
color:Red;
}
.resultButtons
{
top:5px;
}
The larger problem (all my fault) was the browser was not purging teh cache on close. After dumping the cache and reloading the page the styles began to render correctly. Thanks to all for taking the time to look at this and offer your input.
I have the following HTML:
<div id="graphicArea">
<div id="page1" class="pageArea land"></div>
<div id="page2" class="pageArea land"></div>
</div>
my CSS stylesheet file snippet (this works):
.pageArea {
width:220px!important;
height:210px!important;
}
my CSS stylesheet file snippet (this don't work):
.pageArea.land {
width:220px!important;
height:210px!important;
}
neitheir this works:
div.pageArea.land {
width:220px!important;
height:210px!important;
}
There is not much in this file further on, so I'm pretty sure it's not overriding the css.
Anyone know why cant it work?
Thanks.
EDIT
All this css is within #media print { .. }. I don't think its relevant though.
EDIT2
Does FF has any issue regarding setting a div height/width in mm? I guess that's the whole point...
According to the CSS 2.1 specification, your code should work. Are you using Internet Explorer 6?
edit 1: .class1.class2 works with Chrome, and probably other browsers as well. Are you sure your selector is not working? Try "display: none" to be really sure.
.pageArea.land means that the element you're targeting has 2 classes, pageArea and land.
How is your HTML laid out? Is .land a child of .pageArea? If so you just need a space between them, i.e.
.pageArea .land {
....
}
Try this:
<div id="page1" class="pageArea land"></div>
.pageArea {
width:220px!important;
height:210px!important;
}
.land {
width:220px!important;
height:210px!important;
}
you have the dot of land in the pageArea , It must look like div.pageArea, .land
You have to have a space between .pageArea.land like this .pageArea .land You can try the following css structure
div#page1 .pageArea{
css goes here
}
div#page1 .land{
css goes here
}
div#page2 .pageArea{
css goes here
}
div#page2 .land{
css goes here
}
Use Firebug to determine which styles are influencing the final appearance of these elements, once the cascade is applied.
Given the small snips HTML and CSS you've given us, it looks alright, yet you are telling us that you're not getting the desired result. Add to that your superfluous use of !important, and I think it's safe to conclude that your stylesheet contains many conflicting properties that aren't shown in your code sample, and one or more of them are influencing .pageArea.land.
EDIT All this css is within #media print { .. }. I don't think its relevant though.
If it's in #media print { } the css will be applied when PRINTING
To have it be applied in the browser use #media screen { }
And if you want to see it in both print and on screen use #media screen, print { }