I have scoured the web for simple ways to make a progress bar on a website that is consistent across all browsers. I have achieved this for PCs by using elements instead of the progress element and thought all was well until I looked at the website on my android phone using chrome browser app.
It would appear that Chrome for Android does not support this code?!
Can someone point me in the right direction to get this to appear correctly?
#percent {
background-color: black;
border-radius: 10px;
padding: 3px;
color: yellow;
height: 38px;
}
#inner {
background-color: white;
border-radius: 8px;
height: 100%;
width: 100%;
float: right;
}
#bar {
background-color: cyan;
border-radius: 8px;
text-align: center;
line-height: 38px;
color: blue;
height: 100%;
float: left;
}
<br><br><br>
<div id='percent'>
<div id='inner'>
<div style='width: 63%;' id='bar'><b>63% Full (1354.3 GiB Free)</b></div>
</div>
</div>
I tested the code using the (desktop) chrome device emulator and it runs fine on all sorts of devices. This does, however, not emulate the chrome app for android or IOS, but the aspect ratio of the device does not influence if the nested <div> renders or not.
I hope this gives you some insight into your problem.
P.S. Did you check if your chrome version is up-to-date? It might run an outdated version of html/css
Related
I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?
add some line-height with the same value as the font-size and see if it fixe anything.
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.
I am developing an Angular 5 application which is supposed to be used by advertisers to create advertisements to be displayed on a host of different mobile devices. The client is now asking for a preview screen for a 3.5 inch smartphone screen on Android and iOS.
Do you have any ideas how to render real time images just uploaded in a preview mode for both iOS and Android - either as a separate page or as a modal - within a desktop app?
Is there any JavaScript framework that can help with the default screens and layouts for both of these devices?
Anything better than a resized iframe?
Following my comment : I don't have knowledge of a framework that can do that.
But it's pretty easy to mock. All you need is to display a div that has the size of the phone screen you're targeting.
You won't need much code and browser compatibility since you only want to display an image and some text. I'm pretty sure all browsers can handle that.
A quick search for the iPhoneX gave me the dimensions 2.436 x 1.125
Given the size, let's take a third of this : 812 x 375
Now I don't know the buttons on iPhone so I won't display them, but here is a mock of an iPhoneX screen :
#screen {
height: 821px;
width: 375px;
border: 1px solid black;
margin: auto;
}
#img-ad {
height: 80%;
background: teal;
color: rgba(0, 0, 0, 0.54);
display: flex;
align-items: center;
justify-content: center;
font-family: Helvetica;
font-weight: bolder;
font-size: 30px;
}
#txt-ad {
height: 20%;
background: tomato;
color: rgba(0, 0, 0, 0.54);
font-family: Helvetica;
font-weight: bold;
box-sizing: border-box;
padding: 24px;
text-align: center;
}
<div id="screen">
<div id="img-ad"><span>80% of screen</span></div>
<div id="txt-ad">Lorem Ipsum Dolor sit Amet, and I only remember this part</div>
</div>
When I try to use background-color: rgba(233, 233, 227, 0.72); on a mobile device (or Tablet) with Android, a problem occurs:
As you can see in the picture above, there is a horizontal line between the two divs. This problem only appears on Android devices: Android or Chrome browser.
On a desktop computer this code works fine.
If you want to try it:
http://jsfiddle.net/karmany/1y10cn0j/
Is this a bug on Chrome and Android browser?
Code:
.bckg {
background-color: blue;
}
.div-top, .div-bottom {
height: 50px;
background-color: rgba(233, 233, 227, 0.72);
background-clip: border-box;
width: 100%;
display: block;
padding: 0;
border: 0;
margin: 0;
box-shadow: none;
}
<div class="bckg">
<div class="div-top"></div>
<div class="div-bottom"></div>
</div>
It is definitely a bug in Chrome browser for Android. I've reported this issue: https://code.google.com/p/chromium/issues/detail?id=524068
I have run into a very strange and incredibly annoying rendering bug in the Android WebView. I have tested this in a bunch of other browsers both on the computer and on my phone, and it does what its supposed to, but not in the WebView.
The blue box should be the same height as the header (30px) with text vertically centered in it, but instead, it is rendered as 25px. The only fix I've found, which doesn't make any sense, is to set the line-height of the blue box to 35px only on Android WebView, but this is a terrible hack.
css
body { margin: 0; }
#header {
height: 30px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#button {
float: right;
line-height: 30px;
background-color: blue;
color: wheat;
vertical-align: middle;
}
html
<body>
<div id="header>
<div id="button"></div>
</div>
</body>
This is caused by the font boosting feature from webkit. There is actually a bug assigned to your problem: Bug 84186
Having the same problem as you, I actually created a javascript library that tries to fix the issue automatically. Be warned though, it's still in BETA status.
i added a div with a lot of data in it, and it works fine on a PC and on the Blackberry, but it doesn't work on Android: The data is retrieved with no problems but the div isn't scrollable.
Here is the HTML code:
<div id="scroll">
<div runat="server" ID="view"></div>
</div>
And the CSS:
#view
{
position: absolute;
top: 15%;
left: 0.9%;
width: 98.3%;
height: 75%;
font-family: Calibri;
font-size: 0.5em;
white-space: pre-wrap;
border: 1px solid black;
overflow: auto;
padding: 0.2em;
}
What is the problem?
If you're trying to do this on a native android application, you're going to have to implement a ScrollView:
http://developer.android.com/reference/android/widget/ScrollView.html
I found a creative work-around (that works on Android (2.3.5 Gingerbread) and Firefox browser for Android).
I didn't have the problem reported here on the first site I did but had issues on the second. After finding this answers here I remembered the old site worked so I checked what I did there. Copying over old to new site I was able to fix my problem...
This works on Android/Firefox browser but does not put a scroll bar indicator on screen (but touch-drag scrolls the content down the .
What WORKED for me is dual Tags... EMBED code to scroll in a second tag.
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;">
<div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]
then close DIV tags now the content in the second
may not be the prettiest code or method to use, but it got the job done for me (although I haven't tested in iOS devices).
For what it's worth...
-LB-
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;"><div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]</div></div>