We have styled an search text input box on our site with a background image, all looks great until you click on it using android and the background disapears whilst typing, once typing is completed the image returns!!
Anybody have any tips to fix this please?
This is the css used for the input -
background: url(http://ourserver/qsBG.jpg) no-repeat scroll left top transparent;
background-color:transparent;
border-style: none;
font-size: 14px;
height: 27px;
line-height: normal;
margin-left: 5px;
overflow: hidden;
vertical-align: bottom;
width: 282px;
Padding:0!important;
margin:0!important;
padding-top:5px!important;
padding-left: 24px!important;
I had the same issue, I removed the overflow:hidden on the inputs and it fixed the problem. The same page didn't have a problem on iOS.
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.
Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
I have been working on a mobile app using Polymer. I just recently ran into a problem where Polymer's core-overlay box does not let me scroll down, and it just leaves content cutoff. It's basically an info box that comes up when you tap it with your finger.
Everything was working perfectly last Tuesday, until the big Android 5.0 update hit the very next day on my phone. That's when things started to become buggy. My co-worker's phone still has the Android 4.4 version, and it scrolls down and up just fine. I'm wondering if anyone else has/is running into this too or have a solution to this. Also, I am using a Samsung Galaxy S5 with Cordova.
Here is the CSS and some of the HTML for the core-overlay element that I mention:
<core-overlay id="infoOverlay" class="dialog" layered backdrop transition="core-transition-center" core-overlay-toggle>
<style no-shim>
.dialog {
box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: #999;
font-size: 1.4em;
text-transform: none;
-webkit-user-select: none;
-moz-user-select: none;
overflow: hidden;
background: black;
padding:20px 20px;
outline: 1px solid rgba(0,0,0,0.2);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
border: 2px solid white;
}
#infoOverlay {
box-sizing: border-box;
/*text-align: center;*/
width: 80%;
height: 70%;
}
#settingsTitle {
color: white;
font-size: 1.5em;
padding-bottom: 5px;
}
.settingsText {
border-bottom: 1px solid #999;
padding-bottom: 20px;
padding-top: 10px;
}
.settingsTextLast {
padding-top: 10px;
}
</style>
<div id="dummydiv">imagine enough divs</div>
</core-overlay>
Any help, information, or anything would be greatly appreciated! I think I provided enough information, but I will provide more upon request.
Thanks for your time!
This should work if you set overflow in your .dialog to auto or scroll.
I'm trying to position a form field such that it is always 40% down the page and takes up exactly 64% of the screen width, regardless of the screen it is on, the height of the form element is always supposed to be exactly 5% of the screen's height.
This seems like it should be trivial but I have been unable to figure it out based on any of the vertical positioning tutorials here. I can get the positioning correct using code similar to below:
#welcome_email {
/*positioning */
position: absolute;
top: 40%;
left: 18%;
width: 64%;
box-sizing: border-box;
height: 5%;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
}
#welcome_password {
/*positioning */
position: absolute;
top: 45%;
left: 18%;
width: 64%;
height: 5%;
box-sizing: border-box;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
border-top: none;
}
<input id="welcome_email" placeholder="E-Mail"></input>
<br>
<input id="welcome_password" placeholder="netid(?)"></input>
But then when the soft-keyboard opens on android everything shrinks because the viewport sizes have changed. Is there any way I can achieve both of these goals? Ideally when the keyboard is open it would just focus on the form field like any other form on the internet without rescaling (with scrolling enabled) but when the keyboard is down the element would be positioned in the way depicted above. (You can see similar behavior by opening chrome's CDT for example)
Another way to think of this question is, can I scale and position elements relative to the screen size only once and not everytime the viewport size changes?
Try to an extra css propierty to your "welcome" fields:
min-height:5%;
If i doesnt work try to use a value in pixels. min-height:30px;
EDIT:
I added a div that cotains the 2 inputs, try it: http://jsfiddle.net/7aoo6ktf/
<div class="container">
<input id="welcome_email" placeholder="E-Mail"></input>
<br>
<input id="welcome_password" placeholder="netid(?)"></input>
</div>
.container{
position: absolute;
top: 40%;
left: 18%;
width: 64%;
}
#welcome_email {
/*positioning */
box-sizing: border-box;
width:100%;
height: 5%;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
}
#welcome_password {
/*positioning */
height: 5%;
width:100%;
box-sizing: border-box;
/*content*/
background-color: transparent;
border: solid;
border-color: red;
border-top: none;
}
My advice would just be to set a size e.g. 50px;. What I think might be happening is that once the keyboard appears your application reloads and applies the 5% based on the screen size minus keyboard size.
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.