I have a React component that is trying to simulate a progress bar. For simplicity sake, I've paired it down to the code-snippet below:
.bar {
background-color: #EAECEF;
border: 1px solid #3D4D5B;
height: 12px;
width: 100%;
}
.progress {
background-color: #3D4D5B;
color: #000;
height: 12px;
width: 100%;
}
<html>
<body>
<div class="bar">
<div class="progress"></div>
</div>
</body>
</html>
The issue is that at certain resolutions, unwanted gaps start to appear between the inner div and the outer div. This can be shown by simply zooming in (ctrl-+) the rendered progress bar. I've only noticed this behavior with Chromium-based browsers and not with Firefox.
Does anyone know why this would be happening and/or have any suggestions on how to address this issue?
Would you like to remove border style from bar div element?
It will solve the problem.
The issue was happening because of the border (1px) which appears/disappears when zooming in/out. Now, the issue is solved only by removing the border.
.bar {
background-color: #EAECEF;
/*border: 1px solid #3D4D5B;*/
height: 12px;
width: 100%;
}
.progress {
background-color: #3D4D5B;
color: #000;
height: 12px;
width: 100%;
}
<html>
<body>
<div class="bar">
<div class="progress"></div>
</div>
</body>
</html>
Related
Very new to web dev so apologies in advance if I sound like I do not know what I am doing. Trying to have this type of border around an image but cannot manage to do this with that specific corner. Any ideas?check the link please cannot embed images into this post
There are two blocks. you can use something like this(picture on the red one)
.bg
{
width: 120px;
height: 120px;
border: solid green;
}
.image
{
position: relative;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div class="bg">
<div class="image">
</div>
</div>
</body>
</html>
I'm trying to create an effect where I have a tall bordered div, with 3 equally sized divs inside of it, each inner div with its own background color.
I thought the css "math" would be easy for this, but my results look wrong.
<html>
<head>
<style>
#main {
height: 156px;
width: 52px;
background: #CECECE;
border: 4px solid gray;
border-radius: 4px;
}
.inner {
width: 52px;
height: 52px;
}
#i1 {
background: green;
}
#i2 {
background: red;
}
#i3 {
background: blue;
}
</style>
</head>
<body>
<div id='main'>
<div id='i1' class='inner'></div>
<div id='i2' class='inner'></div>
<div id='i3' class='inner'></div>
</div>
</body>
</html>
JS Fiddle example
Does anyone know why part of my main div's background is showing through inside of its border and how I can fix it?
In case the way your browser renders the fiddle is different than mine (I'm using Chrome), here is what I see (my problem is the light gray showing through from the main div background on the inside top, left and right of my border):
My browser's rendering
I would simplify the CSS: Erase the height setting from #main and the width setting from .inner. That way the inner DIVs will fill the whole width of #main, and #main will get its height from its content - the three inner DIVs.
#main {
width: 52px;
background: #CECECE;
border: 4px solid gray;
border-radius: 4px;
}
.inner {
height: 52px;
}
#i1 {
background: green;
}
#i2 {
background: red;
}
#i3 {
background: blue;
}
<body>
<div id='main'>
<div id='i1' class='inner'></div>
<div id='i2' class='inner'></div>
<div id='i3' class='inner'></div>
</div>
</body>
I'm pretty sure your zoom level isn't on 100%. Left is a screenshot of your image, middle is how my Chrome renders it on 100%, right is my Chrome on 80%. I can't seem to reproduce your exact zoom level, but as you can see, similar issues show up at different zoom levels...
I'm trying to use draggable divs, but the ghost image I get while dragging is wrong. The divs are inlined, and there is a hidden overflowing part. Here is a minimal example that demonstrates the problem. HTML:
<div class="box" draggable="true">
<div class="inner-box"> </div>
</div>
<div class="box">
</div>
And the CSS:
.box {
overflow: hidden;
display: inline-block;
width: 80px;
height: 80px;
background-color: #ccc;
}
.inner-box {
position: relative;
left: 40px;
top: 40px;
width: 80px;
height: 80px;
border: 2px solid black;
}
JSFiddle: https://jsfiddle.net/gokjkqxm/
If you try to drag the first div, the ghost image contains a part of the second one, which is something I'd like to avoid. Does anybody know of a way to solve this issue without using images?
Thanks in advance!
It's best to see it yourself, so check out this fiddle:
https://jsfiddle.net/6rc4zzcv/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
#container
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAADICAMAAACHxIozAAAABlBMVEUAAAD///+l2Z/dAAACq0lEQVR42u3VQQ0AMAzEsHX8OXcoWuk0G0I+uQUAxLsHAIhn6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChAwCGDgCGDgAYOgBg6PCtXqAyGDowrcZpDIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6AGDokKfHaQyGDkyrBSqDoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChSwAAhg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDALEeYdfPYfw5pLEAAAAASUVORK5CYII=');
background-position: center top;
background-repeat: no-repeat;
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
}
#centerbox
{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative
}
#floater
{
position: absolute;
top: 50px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="centerbox">
<div id="floater"></div>
</div>
</div>
</body>
</html>
When you resize the browser window (or just the fiddle output window), sometimes the red square stays exactly within the black frame, and sometimes there's a 1px gap. I checked this in Chrome and IE11. IE11 seems to try and render "half-pixel", so it's less noticeable, but still there. Curiously, if the background image is smaller than the viewport, this does not happen.
I can imagine the cause for this effect (the centering code is duplicated in two places, for background and for margins, and uses different rounding methods) - but how to work around it?
In real life, the black box is actually an artistically drawn box which merges with the background, so I'd really rather avoid splitting it out.
jsFiddle
Yes exactly as you've noticed, the issue is that Chrome (and possibly other browsers too) bugs on centering large images, cause the centering calculation offset.
One solution would be, instead of setting that 2000×200px background to the parent hitting that issue, use another inner element set at
#bg{ /* I'm inside the parent */
position: relative;
background: url("2000x200image.jpg");
width: 2000px;
height: 200px;
left: 50%; /* center left edge */
margin-left: -1000px; /* -half width */
}
as you can see above, the element is centered! and will move same as all other centered elements on the page.
HTML:
<div id="container">
<div id="centerbox">
<div id="bg"></div>
<div id="floater"></div>
</div>
</div>
CSS:
#container{
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
overflow:hidden;
}
#bg{
position:relative;
width:2000px; /* same as your image size */
height:200px;
/* center element instead of image! */
left: 50%;
margin-left:-1000px; /* -half width */
background: url('data:image/png;base64,iVBORw0KG...=');
}
#centerbox{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative;
}
#floater{
position: absolute;
top: 51px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
The answer you already know. Pixel perfection on the web is a myth. You can Google for that and find a multitude of articles about the subject. Rounding errors are the chief culprit. Bugs may be another but, perhaps, less likely. Attempting to line things up to the pixel and then hope the browser, any browser, resizes fractional calculations in your favor is never going to happen except with just luck.
I've been looking at this question and I'm having trouble getting my progress bar to work exactly the way it should.
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="upload_status"></div>
</div>
<div id="bar_color2">
<div class="upload_status"></div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
}
#bar_color1 {
background-color: #FFFFFF;
color: #000000;
width: 100%;
}
#bar_color2 {
background-color: #000000;
color: #FFFFFF;
width: 0px;
}
#bar_color1, #bar_color2 {
height: 20px;
position: absolute;
top: 0;
left: 0;
}
As I dynamically increase the percent of #bar_color2 and update .upload_status, I end up with something like this:
Whereas I want the text to remain centered one on top of the other, so when the progress reaches half way the text appears to change color... I've tried various things, swapping divs around, adding another parent, but I just can't seem to figure it out. Any ideas?
I know that this doesn't really help your question, but using the native HTML <progress> element will save you a lot of headaches when interacting with it using JavaScript if you're targeting relatively modern browsers.
edit: The stuff I posted earlier doesn't work, but this does:
http://jsfiddle.net/mYEM3/8/
Just copy from there.
You can just change the color of the text that is on the progresive loading bar(not the middle one/the white one) to black and the annoying percentage should dissapear.
And about when the progress reaches half way the text is supposed to change color problem, i think you can do this as well with the change color thing.
Here's a rough idea that will work:
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="progress_text1">50%</div>
</div>
<div id="bar_color2">
<div class="progress_text2">50%</div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
overflow:hidden;
}
#bar_color2 {
background-color: #FFFFFF;
color: #000000;
width: 50%;
}
#bar_color1 {
background-color: #000000;
color: #FFFFFF;
width: 50%;
}
#bar_color1, #bar_color2 {
height: 20px;
position: relative;
float:left;
overflow:hidden;
}
.progress_text1{
position: absolute;
left:100px;
width:100px;
text-align:center;
}
.progress_text2{
position: absolute;
right:100px;
width:100px;
text-align:center;
}
I Think its only possible with javascript.
Its not complete, and only a little example with changing the "color" after 50%, but the trick is to using special "layers" for that: http://jsfiddle.net/J92Bv/
<div id="progress_bar">
<div class="progress_left" style="width: 50%;"></div>
<div class="progress_right" style="width: 50%;"></div>
<div class="text_1">50%</div>
<div class="text_2">50%</div>
</div>
You must change the z-index if the "white" text overlaps with the first progress-bar layer. In combination and a little more time you can create an progressbar, there change the color correctly when the bar appears to the text. I think here you must use a little helper layer there is positioned after 50%.