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.
Related
I'm having a issue with Android not displaying multiple spaces for text in a <div>. If you look at my example below on desktop, the text "Test" is at the very edge on the right. If you look at it on an Android device, it's about 20ish pixels away from the right edge. I'm using the white-space:pre-wrap CSS style, but for some reason it renders incorrectly on Android.
I'm building a text scrolling app that needs to respect spaces that the end-user enters. Basically, I need to display what the user enters, multiple spaces and all.
Does Android render white spaces differently? If so, how can I get it to look consistent across all platforms?
.parentDiv {
width: 277px;
height: 50px;
top:0;
left:0
position: absolute;
background-color: rgb(0, 0, 0);
word-wrap: break-word;
line-height: 1.0em;
overflow: hidden;
z-index: 1002;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
filter: alpha(opacity=100);
-moz-opacity: 1.00;
-khtml-opacity: 1.00;
opacity: 1.00;
font-family: Arial, fallback Arial;
font-size: 14px;
text-align: start;
color: rgb(191, 190, 191);
border: 0px solid;
-webkit-touch-callout: none;
-webkit-user-select: none;
khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.textBoxText {
font-family: inherit;
font-size: inherit;
text-decoration: inherit;
}
<div id="layer-0-0" class="parentDiv">
<div class="textBoxText"> TEST</div>
</div>
View on JSFiddle
I have a section of text created via the following Jade (an HTML templating engine):
header
div(class="header-logo") Order Of The Mouse:
div(class="header-phase") Phase 1.7 --
div(class="header-title") Operation Silk Scarf
This is styled using the following CSS:
header {
background-color: #78B82A;
color: #FFF;
text-shadow: 2px 2px 2px #000000;
text-align: center;
height: 115px;
}
.header-logo {
font: 1.5em Arial, sans-serif;
float: left;
position: relative;
display: inline;
margin-left: 1%;
margin-top: 7px;
}
.header-phase {
font: 12px Arial, sans-serif;
position: relative;
display: inline;
}
.header-title {
font: 3.4em Arial, sans-serif;
position: relative;
float: right;
top: 10px;
left: 12px;
}
(I know the CSS needs tidying up a bit, it was written in a hurry last night while quite tired).
My question is this: why does the left margin not scale for mobile devices? It seems to scale ok on my laptop in different browsers and when the window is resized, but when I access with my android device (again I've tried two different browsers) the div text is way over to the right of the screen, instead of slightly indented from the left, as I would have expected.
I can include screen-shots on mobile and non-mobile devices if necessary.
Also, it used to and should look like this:
Now the code above displays as follows in a non-mobile browser (and similarly in a mobile browser):
Which is no good at all.
When the Jade is converted to HTML it currently looks like this:
<header><div class="header-logo">Order Of The Mouse: </div><div class="header-phase">Phase 1.7 --</div><div class="header-title">Operation Silk Scarf</div></header>
Ok, I looked over it again with fresh eyes and it looks as if this was the solution to the resizing issue:
header {
background-color: #78B82A;
color: #FFF;
text-shadow: 2px 2px 2px #000000;
height: 115px;
}
.header-logo {
font: 1.5em Arial, sans-serif;
float: left;
position: relative;
display: inline;
margin-left: 1%;
margin-top: 7px;
}
.header-phase {
font: 14px Arial, sans-serif;
position: relative;
display: inline;
left: 6px;
top: 10px;
}
.header-title {
font: 3.4em Arial, sans-serif;
position: relative;
top: 12px;
left: 80px;
}
Lord alone knows how it managed to look right last night with the code I had but somehow it did. Strange times.
I'm building a Cordova app and I'm wondering why I'm seeing the same font render differently between the Chromium WebView (embedded in the cordova app) and on the Chrome app on Android 4.4.2.
As you can see, the WebView version seems to bump up the font by a few pixels. Here's the computed styles:
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
background-color: #FFF;
border-bottom-left-radius: 7.5px;
border-bottom-right-radius: 7.5px;
border-top-left-radius: 7.5px;
border-top-right-radius: 7.5px;
color: #4F9EF7;
cursor: pointer;
display: block;
font-family: Museo-900;
font-size: 20px;
height: 50px;
line-height: 50px;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 20px;
padding-right: 20px;
position: relative;
text-align: center;
text-overflow: ellipsis;
visibility: visible;
white-space: nowrap;
width: 295px;
z-index: 0;
Why would they render differently if they're backed by the same technology? How might I even detect the different environments and style accordingly?
I'm having the same issue and it seems to be the line-height property that's not being used the same in the webview. I need to have a bigger line-height in the webview than in chrome.
chrome & webview version 78.0.3904.96
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 have created a website for a client that works on all web browsers as I intended except for Android. For reasons unknown the Android browser resizes my Menu bar as well as the part depending which phone it is running on.
If you would like to see the code please go to this link
This is a screen shot from the Galaxy Nexus
screen shot from Galaxy Nexus
As you can see the text has been pushed into a tall thin column. I have no idea why it is doing this.
Any help would be much appreciated.
Delete everything in the #AboutUs From the #AboutUs in Style.Css line 445.
Before
#AboutUs
{
height: 655px;
}
After
#AboutUs
{
}
As for the footer, remove the width from its css (#legal) (Line 693 in Style.CSS)
Before
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
width: 130px;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
After
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}