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.
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 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 am building a menu for my site to target mobile devices, and my default Android browser is acting very funny. I've stripped everything down to bare minimum, and as basic as i could to test everything out.
I am using jquery's .Toggle function to have my menu appear and disappear. It functions perfectly. Just as intended in all browsers. I went to test it on my mobile device and it worked / looked perfect in Firefox. Then I went to test it in the default Android browser. To my dismay there was a problem.
When you click the div that toggles the menu to make it appear the div moves to the left leaving a gap on the right side of the menu. What is funny is that I have a div inside of the menu container that retains its 100% width, and extends to the far right side of the screen. The css for the div inside of the menu div has practically the exact same css. So I am so confused as to why it is retaining it's 100% width but not my div that appears when toggled. Does anyone have any ideas? Below is a screen shot of the issue and my code.
html
<div id="mobilemenu">
<ul>
<li>Home</li>
<li>Random</li>
<li>Submit</li>
</ul>
<div id="mobilemenu-catdrop">
Categories
</div>
</div>
<script>
var flip = 0;
$("#click").click(function () {
$("#mobilemenu").toggle( flip++ % 2 == 0 );
});
</script>
css
/* header */
header {
background: #2e97de;
width: 100%;
height: 45px;
border-bottom: #287eb9 1px solid;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: block;
}
/* mobile menu */
#mobilemenu {
border-top: #8dc8f2 1px solid;
width: 100%;
background: #2e97de;
display: none;
}
#mobilemenu ul {
}
#mobilemenu li {
display: block;
}
#mobilemenu li a {
padding: 10px;
color: #95d3ff;
display: block;
text-decoration: none;
}
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
}
This is happening because the div #mobilemenu-catdrop is actually beyond the width of #mobilemenu since you're using padding with 100% width. use the border-box you're using on the header with that div instead:
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
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.