I need to print a div, for this I'm hiding everything else, but on IE8 (on IE11 too) my div is printed on 22pages! (or less depending on the page behind). I'm making all other stuff invisible and reducing the height of the body but it doesnt help.
<body>
<div id="wrapper">
<div class="loading">more divs/p's/whatnots</div>
<div class="navigation">more divs/p's/whatnots</div>
<div class="page">more divs/p's/whatnots</div>
<div class="nav-buttons">more divs/p's/whatnots</div>
<div class="certificate">more divs/p's/whatnots</div>
</div>
</body>
This is my media=print style
body {
height: 100px !important;
overflow: hidden !important;
}
body * {
visibility: hidden;
}
.certificate * {
visibility: visible;
}
I can't do display:none; in the body * as this includes the certificate div (and it's content) so there is no easy way to restore it in .certificate *.
What else I could do to print it without a hassle on IE?
EDIT so far the only working solution is to use display:none; but so I don't have to restore it I'm applying this not to body * but to more specific paths e.g. body .page *, body #wrapper * but in a way so I don't "hide" certificate (thus don't have to restore it). If there is a better more flexible way to do it, I'm all ears.
EDIT2 also I could do body #wrapper > * to hide all children of #wrapper but not going any further, then just body #wrapper .certificate to restore display property works
body #wrapper > *
{
visibility: hidden;
display: none;
}
body #wrapper .certificate {
visibility: visible;
display: table;
}
Related
div {
width: 50px;
}
span {
display: inline-block;
}
p {
max-height: calc(1em + 5px);
}
<div>
<span>a</span>
<span><p class="ellipsis">b</p></span>
</div>
It seems when ellipsis is applied to the p it calculates the width as if it were the full width of the div, rather than its width - width of a (as they are display: inline)
I can see when I inspect that it calculates the ... as if it were the full width of div. Does anyone know a workaround for this (it works for the normal cases I use it in)?
I have a web application that has a draggable div I need to print when the user selects print from the web browser.
The most succinct advice I found so far is this stack overflow answer, where it is suggested I make my page invisible and display #plotArea only for #media print like so:
#media print {
body * {
visibility: hidden;
}
#plotArea, #plotArea * {
visibility: visible;
}
#plotArea {
/* this positioning ignores .draggable() divs */
position: absolute;
left: 0;
top: 0;
}
}
However, because this div is draggable, I cannot for the life of me remove the offset such that the div positions itself properly for printing. Is it possible to temporarily remove the offset somehow for a draggable div? Below is the div's jquery / css
//jquery
$( "#plotArea" ).draggable().offset({ top: 15, left: 400});
/* css */
#plotArea {
background-color: #FFFFFF;
width: 42em;
height: 54.5em;
float:left;
font-size: 12pt;
overflow:hidden;
}
So what you are saying is that the draggable plugin is applying inline styling to your #plotArea div and therefore overwrites the positioning css you add to it with your print media query?
What you need to do is reset it's positional values for top/left, etc to auto and use the !important rule overwrite to overwrite the inline styles applied to it via the javascript plugin.
For example;
#media print {
#plotArea {
left: auto !important;
top: auto !important;
}
}
I have the following HTML.
<body>
<nav>..</nav>
<div class='container'>
<div class='row' id='header'>
...
</div>
<div class='row' id='content'>
...
</div>
</div>
</body>
My aim is to have the header remain constant height, while the content fill the rest of the page (I have a Highchart in there). I have tried to use the information here: how do I give a div a responsive height and here: http://codethatworks.blogspot.co.uk/2012/05/responsive-full-height-columns-using.html and here Make a div fill the height of the remaining screen space - but with no luck.
My basic understanding is that I set the body height to 100%, and the header height to say 25% and the content to say 75%. Is the nav confusing things here?
Please note that I am using Bootstrap 3.
It's not just the body you need to set to 100% height, it's all the parents of those two 'rows'. So in your case, html, body, .container.
html, body {
height: 100%;
}
body > .container {
height: 100%;
}
nav {
position: absolute;
top: 50px;
}
#header {
height: 25%;
background: yellow;
}
#content {
height: 75%;
background: red;
}
If you don't set your nav to be positioned absolutely, then it'll cause a scrollbar as it's pushing the content down and making the total height more than 100%.
Demo here!
You can use the viewport percentage. See this fiddle
Relevant lines:
#header
{
height: 25vh;
...
}
#content
{
height:75vh;
...
}
In this case you don't have to set the height of body, html, etc. If you want it to fill the page without padding you would add:
body
{
padding:0px;
margin:0px;
}
See support here.
See this answer for more details.
For the nav element, you either need to make this absolutely positioned as suggested in other answers or give up some percentage of the page for the nav. E.g. make content height 65vh and nav height 10vh.
I am trying to create a div element with fixed size in html. My problem is, the above div receives input text from backbone. The size of text is unknown, so every time that the transmitted text is big, automatically the size of the div is change. How is it possible to display only the first words of the text that fit in the predefined bounding box of the div???
My css code
.hashTagsCloud {
max-width: 500px;
max-height: 400px;
overflow: hidden;
}
And html code:
<div class= "hashTagsCloud span4 offset1 "> //bootstrap
<div id="profiles> //backbone view
<script id="profileTemplate" type="text/template">//backbone template
</script>
</div>
</div>
I take data with getElementById.
You can use the overflow: hidden; property, granted that you set a width and height on the div already.
<style type='text/css'>
.text {
width: 100px;
height: 18px;
overflow: hidden;
white-space: pre-line; /* breaks up the text on spaces before hiding */
}
</style>
<div class='text'>some really really really long text</div>
In the CSS for the Div Element, you could use
overflow: hidden
you can use from this text-overflow: ellipsis; of css, check this
How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.
Do you need something like this?
<div style="position:absolute; bottom:0;">Hi</div>
http://jsbin.com/ayaqo4
What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:
<body>
<div class="wrapper">content here!
<div class="push"></div>
</div>
<div class="footer">footer content</div>
</body>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
This is my personal favorite for sticky footers:
http://www.cssstickyfooter.com/
You need to use css,
div.pos_fixed_footer{
position:fixed;
bottom:0%;
right:0px;
background:transparent url(../img/bg_header.png) repeat scroll center top;
width:100%;
height:40px;
}
and then call in your script like this
<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>
I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.
Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page