I am with some problems to print background-color in Firefox and IE. For Google Chrome I found the follow hack and it works well, but for Firefox and IE I can't find anything.
//Hack for Google Chrome
-webkit-print-color-adjust:exact;
I am glad if someone can help me with this.
For Firefox on the Print dialog there is an Advanced or Show Details button, if you click that , under Appearance there are two checkboxes. One for Print Background Colors and Print Background Images.
* {
-webkit-print-color-adjust: exact;
printer-colors: exact;
color-adjust: exact;}
Browsers: Chrome, Safari, FireFox
More: https://wiki.csswg.org/ideas/print-backgrounds
If you are OK with having your element being a fixed height/width, you can set its size, put a 1px coloured image into it (of whatever colour you want the background to be) and make it fill the space. Then you can absolutely position your content on top.
<div style="position: relative; width: 100px; height: 100px;">
<img src="/images/blue.png" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello world
</div>
</div>
Or you could do the same thing with a border instead of an image:
<div style="position: relative; width: 100px; height: 100px;">
<div style="width: 0; height: 0; border: 50px solid black;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello world
</div>
</div>
(Original idea from here: https://defuse.ca/force-print-background.htm)
For Firefox
color-adjust:exact;
will work same as -webkit-print-color-adjust:exact;
Seems impossible, as Spark says, but you can sometime use wide borders as workaround (e.g. div with 0 height and 100px border).
Related
I've encountered strange behaviour while building a circular progress indicator. After trying to isolate the bug I'm out of clues why the border-radius isn't rendered in Chrome on retina displays.
I've got a div which renders a circle and some inner content which is positioned absolute:
.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
.inner {
position: absolute;
left:0;
top:0;
width: 100px;
height: 100px;
background: red;
}
Of course this renders just fine.
However, by adding a few surrounding div's it starts to show a rectangle instead of a circle.
<div style="height: 300px"> <!-- to render scrollbar -->
<div style="position: fixed"></div>
<div style="position: relative"></div>
<div class="circle">
<div class="inner"></div>
</div>
</div>
The isolated issue: https://codepen.io/sanderdejong/pen/qmrXjq
Things which turn the rectangle into a circle again:
Lower the height of the top div so it won't render a scrollbar
Scroll the page so that the rectangle is partially out of bounds
Drag the browser window to a non-retina monitor
Remove the position relative or fixed from one of the sibling div's
I'm not sure how I can isolate the issue even further and if it is explainable why this happens. I also tried Firefox and Safari but both work correctly.
I'm having a problem with a fixed border around a responsively sized div. This issue only happens in Chrome.
I'm having a hard time reproducing it in JSFiddle, but I'm essentially trying to center a div within another (which is placed somewhere on my page) and the centered-div has a nice 1px border around it. The LESS for these two elements are as follows:
.popup {
display: inline-block;
height: 93%; width: 30%;
margin-right: 7%;
margin-left: -3%;
position: relative;
.text {
box-sizing: border-box;
width: 100%; height: 50%;
border: 1px solid black;
padding: 0 5%;
position: absolute;
top: 50%; left: 50%;
.translate(-50%, -50%); # Some LESS that is just a translate call
color: black;
font-size: 18px;
}
}
This is what I see, which changes as the screen size changes (sometimes correct, sometimes different borders are missing/incorrect):
EDIT: Added relevant HTML.
<div class="container">
...Other stuff...
<div class="content">
...Other stuff...
<div class="breakdown">
<div class="block">C++ (Circle dials you see)</div>
<div class="popup">
<div class="text">Some text here to go in the popup</div>
</div>
<div class="block">Java (Next dial)</div>
<div class="popup">
<div class="text">Some text here to go in the popup for the Java dial</div>
</div>
</div>
</div>
</div>
There's more stuff in container, and more stuff in content in the DOM levels shown. However, the other items in container are each in their own block on the page (no overlap), and so is the items in content. A breakdown div holds the dials and popups that you can see in the screenshots. The idea is that when i hover over a "block" or a dial the popup shows up to the right, shoving the next dial over when shown.
I've observed such issues with borders when I have zoomed the page - that would explain why you see it only in Chrome and only on one domain (you said you cannot reproduce it in JSFiddle).
Click Ctrl+0 or check if you have an icon in the addressbar of a magnifying glass (it's displayed when the zoom level is different from 100%).
I'm using ::after to create shadow to decorate a element (say A).
In order to do this, I set the overflow: hidden for A to hide undesired part of the shadow.
It looks perfect, but there is a problem after I added a input box to A. If I click in the input and drag, the A layer will scroll, and the rest part of shadow will show up.
Here is the demo and the simplified code:
<div style="width: 200px; height: 30px; overflow: hidden; border: 1px black dotted;">
<div style="height: 30px; border-bottom: red 10px solid;">
<input style="width: 200px" placeholder="click and drag me downward" />
</div>
</div>
I'm looking for a pure CSS solution to fix this problem. Thanks ahead.
This isn't an ideal solution, but I don't think a pure CSS solution exists to this problem (unfortunately), it makes me wonder whether this has been logged as a bug with the Chrome team.
jQuery should be as follows:
$('input').on('mousedown', function(e){
$(e.target).focus();
e.preventDefault();
});
(I know I shouldn't assume you're using jQuery, if needed I can provide you a pure JS solution, it'll just be more complicated).
Fiddle: http://jsfiddle.net/jzb5a/
EDIT: Apparently this is a known bug (https://bugs.webkit.org/show_bug.cgi?id=114384) it's dissapointing that four months on there still hasn't been a fix though.
Finally come to an solution, which is not that perfect but fixed the problem anyway.
As the background overflows, and the input on the same layer would cause the problem. So just move the input to another layer which doesn't overflow. demo
<div style="position: relative; width: 200px; height: 30px; border: 1px black dotted;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden;">
<div style="height: 30px; border-bottom: red 10px solid;"></div>
</div>
<input style="width: 160px" placeholder="click and drag me downward" />
</div>
I'm using the jQuery qTip to show individual users and their votes when an average rating is mousedover.
qTip calls a PHP file which grabs all the users and votes for the item from the MySQL database and builds a 3 column table, which appears as the tooltip.
In Firefox, the tooltip displays properly.
In IE7 (haven't tested on IE8 yet), the tooltip is the proper height, but the width is only 2 or 3 characters - not the entire table.
If I set the width of the div to a fixed number, say width: 300px; I can coax IE into displaying it properly.
However, the length of my users' names varies considerably, and I'd rather not nail down the div to its maximum possible width and then have a crapload of whitespace when you look at an item voted on only by "Joe".
Using width: auto; has no effect in IE7.
Are there alternatives?
Sorry if I've overlooked a similar question. I searched for a bit before posting but didn't find anything suitable.
EDIT TO ADD CODE:
<div
style="-moz-border-radius: 0pt 0pt 0pt 0pt;
position: absolute;
width: 358px;
display: none;
top: 384.617px;
left: 463.5px;
z-index: 6000;"
class="qtip qtip-defaults" qtip="0">
<div style="position: relative;
overflow: hidden;
text-align: left;"
class="qtip-wrapper">
<div style="overflow: hidden;
background: none repeat scroll 0% 0% white;
border: 1px solid rgb(211, 211, 211);"
class="qtip-contentWrapper">
<div class="qtip-content qtip-content"
style="background: none repeat scroll 0% 0% white;
color: rgb(17, 17, 17);
overflow: hidden;
text-align: left;
padding: 5px 9px;">
<div id="WhoResults">
<table>
<tbody>
<tr>
<td>guy1</td>
<td>guy2</td>
<td>guy3</td>
</tr>
<tr>
<td>guy4</td>
<td>guy5</td>
<td>guy6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I have applied no CSS styling. That's all been handled by qTip. I tried to format it as best I could. Thanks for any help you can provide.
Try using min-width:300px instead of width
It turned out to be a bug in the way qTip was calculating the proper tooltip width for IE. I overrode that line in the qTip code and posted a note to the developer's forum.
I'm trying to put a progress bar inside td of my table. Here's the code:
<td style="width: 150px;">
<div style="height: 16px; max-height: 16px; overflow: hidden; border: 1px solid #80C622;">
<div style="height: 16px; width: 10%; background-color: #bbea7d;"></div>
<div style="margin-top: -16px; text-align: center;">
1470/14166
</div>
</div>
</td>
Chrome, Firefox, Safari and (!) IE displays it correctly, whereas Opera extends the row so there is some extra space above.
Here's how it's supposed to look like: http://ipicture.ru/uploads/100616/16el6B3lB1.png
Here's how it looks in Opera: http://ipicture.ru/uploads/100616/fE4Ad63N1l.png
How do I fix this?
UPD. Oh yeah, I use Opera 10.53.
Try giving the float to divs and fix width to the outer div (this would be required once you give the float). this is just my guess.