I am generating a report using wkhtmltopdf, this reports contains texts with a variable length for this reason I not always can force the page break, sometimes wkhtmltopdf has to do it for me.
I am trying to find out if there is any way of forcing a margin between the footer introduced with wkthtmltopdf (--footer-left foo --footter-right [page]) and the body of the page.
I have already tried with the CSS margin-bottom but it does not work since it is applied to the end of the html not the page breaking.
And i have also tried the wkhtmltopdf margin bottom "-B 10mm" but it does not work since it is also applied to the footer.
Any clues please?
Thanks in advance.
I tried and tried and the solution for this problem is to use wkhtmltopdf flag:
--footer-spacing
I've run into this problem myself. The footer-spacing option is indeed what you want to do. You can also specify a negative amount of spacing if need be (that's what I had to do on my own project).
Related
I'm trying to override overflow for a div from hidden to visible. It's a large project and I'm trying to add some new things in this.
I'm able to apply css to the element using Inspect element console but the same thing doesn't work when adding to the file as internal stylesheet
Tried using !important as well
Please let me know what might be causing this.
Thanks in advance.
There's no reason for CSS not to work while using an internal stylesheet.
Here are two things to try, check if your class name is spelt correctly and you're using the correct selectors.
And you might have a fixed width or height which is causing the content not to be able to scroll over.
Post the code on here for more help if you can.
Mark as answer if this was helpful.
I wish to trick bootstrap rows somehow. I need to put many col-..-.. items in only one row (there are about 8 really complicated .js files that I'm afraid of altering - and it points to children of the div that I additionally used as a bootstrap row). No way to trick the HTML, I have tried many-many ways. In case you don't believe me, check out the specific problem.
Image here
*The red boxes are the images that I'm using and the striped space is left blank. If I align the element that is on the blank row, the next one goes there and the problem is still unsolved.
What's quite interesting that Firefox and IE show everything the way I them to
but Chrome and Edge do not.
Can anyone help me on this? I'm sure there must be some easy way that I missed out, like altering some of the default bootstrap row class properties, but I just couldn't get it. Any suggestions are appreciated.
Solved using CSS Grid layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
I am using the very nice SASS framework, Boubon.io from the great folks a thoughtbot. I'm trying to test out the templates they supply (called Refills), which by-in-large makes Bourbon.io a more flexible drop-in replacement for popular frameworks like Bootstrap.
Mostly this is all very straight forward to set up, but I'm puzzled by the resulting whitespace that appears around the entire nav bar and footer bar that result from simply copy-pasting in these elements from their Refills template.
Here is what I get. Everything appears to be rendering as it appears in the Refills examples, but I'm puzzled by the whitespace surrounding the header and footer boxes. A quick inspection with firebug didn't reveal anything obvious to me, so I'm not sure how to troubleshoot this one.
Apologies for the lack of a more minimal js-fiddle example; but doesn't work when one needs to import these SASS frameworks. Source can be found in this GitHub gh-pages branch repo; since Jekyll on GH-pages compiles the SASS on the fly to render the example; I've just dropped all the underlying bourbon.io, neat, and bitters SASS files in there as well.
The body tag has 8px margin set on it. Get rid of that and you're golden. Make sure you use a CSS reset of some sort. This is something Bootstrap does by default, I can't say for Refills though.
Also, as your footer is display: inline-block you're getting additional margin at the bottom. If you change your footer to display: block then add a clear fix div at the end of it. The blue background should still be the correct height and remove the extra (invisible) margin at the bottom
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I noticed the navigation li items (yellow section) were right of center, so I altered the containing div/nav widths and background background colors just so I could see what was going on in an attempt to fix the misalignment; however, I can't seem to see a reason why this is occurring (in about 6 browsers).
Here is problematic markup/css: http://building-more.site50.net/
It seems to work fine in jsfiddle: http://jsfiddle.net/cTXXH/1/
It doesn't seem to display at all in IE, what is going wrong here?
Also, it looks like you forgot the ending bracket in your endif statement for the IE check.
Should be:
<![endif]-->
It's because some of the elements already have default values such as padding and marging that are skewing your positionings, and this could be different for each browser. That's why people often 'reset' CSS to use 0 margins and 0 paddings by default instead, before starting with their own styles.
Your example works fine in your Fiddle because 'normalize CSS' is checked. This is a framework similar to CSS resets which can be found here: http://necolas.github.com/normalize.css/ - it makes sure that your default positionings are consistent between browsers, and gives you a clean slate to work with.
If you were to include it into your web page it would solve your issues. Hope that helps.