(Addendum: This is Chrome issue 631222, and was fixed in Chrome release 54.0.*.)
With the latest version (53.0.2785.116) of Chrome, on Windows and Mac, we've hit a nasty bug that we can't seem to work around.
We are seeking workarounds that do not involve editing the HTML text, so CSS or Javascript answers might do.
We are getting text at the top of pages other than the first that looks like:
This is an overlay of a paragraph, and two different table headers for tables that occur later on that page. (Where the headers again are printed.)
You can find a full example page here.
We've already reported this to Google, of course, but we were wondering if anybody could think of a workaround to get our customers printing again. We can't change the HTML, but we can change the CSS, or possibly use Javascript. (Removing the thead tags appears to solve the problem, for example, but that solution does not work for us because we can't change the HTML.)
The code is simply:
<!DOCTYPE html>
<html><head>
<title>Broken Printing</title>
</head>
<body>
<h1>Printing Issue 9/29/2016</h1>
<p>Lorem ipsum for page break</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<table>
<thead><tr><th>Survey</th></tr></thead>
<tbody><tr class="odd"><td>The Foundation 2016 </td></tr></tbody>
</table>
<table>
<thead><tr><th>Year</th></tr></thead>
<tbody><tr><td>2015</td></tr></tbody>
</table>
</body>
</html>
We have a workaround:
#media print {
thead {
display: table-row-group
}
}
This loses a feature we don't need much in our reports - repeating of table headers at page breaks - so it is sufficient for us, and is easily removed when Chrome gets fixed.
Related
I want to color all my p in blue, except the one inside the no-color div.
I tried p:not(.no-color), :not(.no-color) p, div:not(.no-color) p but I think I misunderstand something
p:not(.no-color) {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color"><p>Lorem ipsum</p></div>
<p>Lorem ipsum</p>
<div class="random-class"><p>Lorem ipsum</p></div>
</div>
Edit: The HTML code is retrieved automatically, so I can't choose on which elements I apply the classes. I can only stylize in CSS.
You can use something like this if you can't modify the HTML :
.container > p,
.container > div:not(.no-color) > p {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
<div class="random-class">
<p>Lorem ipsum</p>
</div>
</div>
This selector should work, without modifying the HTML:
:not(.no-color) > p {
color: blue;
}
<div class="container">
<p>Lorem ipsum</p>
<div class="no-color"><p>Lorem ipsum</p></div>
<p>Lorem ipsum</p>
<div class="random-class"><p>Lorem ipsum</p></div>
</div>
(Sorry for my previous, unhelpful answers... I actually tested this one!)
EDIT: Fixed answer
I would place the class on the <p> instead, then p:not(.no-color) would work.
If however, you can't change the HTML structure, you can target <p>s which are descendants of an element with a .no-color class by using the .no-color p selector and then set the color to inherit.
Setting the color to inherit allows you to get the color of the enclosing parent without specifying it.
This technique works for arbitrarily nested <p> elements below a .no-color parent.
p {
color: blue;
}
.no-color p {
color: inherit;
}
<p>Lorem ipsum</p>
<div class="no-color">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
<div class="no-color">
<div>
<p>Lorem ipsum</p>
</div>
</div>
We have a container with overflow-y:scroll that must have a footer that is sticky (bottom 0) unless the content inside the scrolling container + the height (which is dynamic) of the footer are bigger than the containers height.
HTML:
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
.content and .footer can have more or less content.
If possible, we do not want to use JS for this.
I created a fiddle here with several states: http://jsfiddle.net/bqvtf1zo/1/
Removing position: absolute on .footer solves it for case "little content" (see fiddle), but breaks the other 2 cases.
You need to create a flex container. (Though there are other ways to hande this problem as well: https://css-tricks.com/couple-takes-sticky-footer/)
For the container, set the display to flex and flex-direction to column and give the scrollable content a flex value of 1. Remove positioning from footer, and there you have it.
This will cause the content to stretch to fill the height of the container if any is available, and it will cause the footer to be stuck to the bottom of the content.
For implementation: Be sure to follow up on all the cross-browser issues with flexbox, such as prefixes and bugs. https://github.com/philipwalton/flexbugs
.wrapper{
position: relative;
height: 205px;
width: 200px;
}
.scroll{
border: 1px solid red;
overflow-y: scroll;
height: 100%;
width: 100%;
display:flex;
flex-direction: column;
}
.content{
background-color: #ccc;
flex:1;
}
.footer{
background-color: #efefef;
}
<h1>
little content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content with large footer
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go further down<br>
Some additional content
</div>
</div>
</div>
I just started working with Bulma CSS Framework. However, I am unable to place text and background image side by side. The background image gets cut. Please help me.
Image I want to add:
Here's the Code:
<section class="hero is-halfheight upload-descr" style = "height: 37em">
<div class="hero-body">
<div class="container">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix" style = "clear:both;"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Sounds traditional, right? Loren Ipsum Does<br />Loren ipsum dolar sit amet. Loren Ipsum<br />Loren Ipsum dolar sit amet. Loren ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet is cool</p>
</div>
</div>
</div>
</section>
I want to place the image just side to the .upload-descr-exp description. But it just gets cut.
I tried:
<section class="hero is-halfheight upload-descr" style = "height: 37em">
<div class="hero-body">
<div class="container" style = "background: url('/img/cover.jpg') no-repeat right">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix" style = "clear:both;"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Sounds traditional, right? Loren Ipsum Does<br />Loren ipsum dolar sit amet. Loren Ipsum<br />Loren Ipsum dolar sit amet. Loren ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet is cool</p>
</div>
</div>
</div>
</section>
I have a website with inconsistent font sizes on different pages. After a lot of experimenting, I found that the fonts (the links below the title that say "About, Poetry, etc") are correct as long as there is enough text on the website, but are wrong when the amount of text changes. Which is crazy. But here's the proof:
In both the HTML and CSS, I always refer to fonts in terms of em not pt. And no tags are being deleted when I remove the text:
Doesn't work:
<div id="page_content" >
<h1 class="section-titles"><strong>About</strong><br>
</h1>
<p id="reveal-on-small-display"></p>
Lorem ip
<p> </p>
<br/>
<p> </p>
</div>
<!-- End of Page Content -->
Works:
<div id="page_content" >
<h1 class="section-titles"><strong>About</strong><br>
</h1>
<p id="reveal-on-small-display"></p>
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
<p> </p>
<br/>
<p> </p>
</div>
<!-- End of Page Content -->
I can attach the CSS and HTML in full if it's helpful, but essentially if I need to
After many hours I've figured out it has to do with the cell phone resizing elements of the page.
Solved with:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I have a page in which the right column content is wrapped around the left column. If I have a simple text or paragraph then the page looks fine.
But suppose the right side content contains a <ul> <li> list element the whole indentation is lost.
See the fiddle here: http://jsfiddle.net/8DB6e/1/
It appears the problem is the wrapRightCol div container is overlaid on top of leftcol. Ideally wrapRightCol container should stay to the right of leftcol and then wrap around.
Can anyone help me here to correct the styles so that I can have the list element placed correctly beside left column with default indentation(i.e with proper padding & margin).
N.B: I am using the Bootstrap UI library
Fiddle HTML
<div class="wrapper">
<div class="leftcol" >
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum</p>
</div>
<div class="wrapRightCol">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<h4>Example list</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p> Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum</p>
</div>
</div>
Fiddle Style:
.wrapper {
float: left;
}
.leftcol {
width: 150px;
float: left;
clear: right;
margin-right: 5px;
border:1px solid #000;
}
You can change the list-style-position property:
li{
list-style-position:inside
}
JSFiddle
First Method
.wrapRightCol ul{ overflow: hidden; }
Second method
li{
list-style-position:inside
}
Demo1
Demo2
list-style-position:inside will bring the bullets inline with the other text in .wrapRightCol but another alternative would be to add extra margin-right to .leftCol to move the right column away from the left and provide some gutter - margin-right:1.5em does the trick.
Based on the fiddle, there is no need for float:left on the .wrapper or clear:right on the .leftcol.
http://jsfiddle.net/z7pVh/