I have tried two options in my AndroidManifest.xml
android:windowSoftInputMode="adjustResize" and android:windowSoftInputMode="adjustPan"
With adjust adjustResize it pushes up my background image so that it looks pretty rubbish. It also allows this weird white section if you scroll down. See the 2nd and 3rd image.
If I use adjustPan it looks great and fixes the problem but on devices with lower resolution inputs are hidden by the keyboard and users can't get to them as scrolling is not possible.
Ideally I want the background image to act like adjustPan but the inputs/other content to act like adjustResize.
Also is it possible to change this setting dynamically e.g. depending on which page you are one?
Edit added code:
<ion-content no-bounce has-bouncing="false" forceOverscroll="false">
<div class="content">
<div>
<ion-img src="./../../../assets/img/branding/logo.png"></ion-img>
</div>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
<ion-grid>
<ion-row class="row-padding-one"></ion-row>
<ion-row>
<ion-col size-sm="6" offset-sm="3" class="input-col">
<ion-item class="custom-item" lines="none">
<ion-input
class="login-input"
type="text"
formControlName="email"
[formControl]="loginForm.controls['email']"
placeholder="E-Mail"
required>
</ion-input>
<div *ngFor="let validation of loginValidationMessages.email">
<div class="error-message"
*ngIf="loginForm.get('email').hasError(validation.type) && loginForm.get('email').touched">
{{validation.message}}</div>
</div>
</ion-item>
...
.content {
width: 100%;
height: 100%;
padding: 0;
position: relative;
background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
background-size: cover !important;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left;
}
try to put background image for ion-content of that page.
This will solve the issue!
Your can do like this:
ion-content{
--background: url('../../assets/imgs/background-image.png') 0 0/100% 100% no-repeat;
}
it will resize your inputs and other content but your Image always will be 100%;
add your css to
.scroll-content {
padding-bottom:0!important;
}
this is known issue in
https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/19
for more info
https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827/9
Related
I am not sure but I think that Chrome for Andoird started zooming on fixed elements without those elements breaking the page/layout any more on zoom.
Please check this simple JSFiddle in your local dev environment running latest Chrome for Android (on a mobile device).
When I zoom the page that has this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
and two fixed elements at the top, the zoom is done like so.
The fixed elements are positioned absolutely and can be zoomed in without having the fixed elements stay in place and break the page/layout.
This happens regardless of if the user has overridden the zoom settings in the accessibility settings or not, even the default zoom started to play nice with fixed elements I think.
Is there a changelog somewhere please for Chrome for Android for the latest update? I cannot find it and am looking to verify if this assumption is correct.
HTML
<div class="fixed-placeholder">
<div class="site-header">
Site Header
</div>
<div class="menu-icon">
Menu
</div>
</div>
<div class="content">
Content
</div>
<div class="content">
Content
</div>
<div class="content">
Content
</div>
<div class="content">
Content
</div>
CSS
.fixed-placeholder {
height: 6em;
display: block;
}
.site-header {
position: fixed;
height: 3em; /* same as fixed-placeholder to avoid page jump or content moving under the fixed element */
top: 0;
left: 0;
width: 60%;
background-color: #ccc;
font-size: 2rem;
/*width: 80vw;*/
/*display: none;*/
}
.menu-icon {
position: fixed;
height: 3em;
top: 0;
right: 0;
border: 1px solid black;
width: 40%;
font-size: 2rem;
/*width: 20vw;*/
}
.content {
height: 500px;
border: 1px solid green;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
Running into an issue mainly on iOS(surprise) My footer is a sticky footer, while it is working according to how a sticky footer works the problem is that content falls below the footer, mainly the image of the lady.
I've tried several workarounds from spanning the image into the background, combining it into the footer, different positioning and nothing seems to work. Maybe I'm overlooking something obvious here?
I replaced the original image. Move your browser vertically all the way in the fiddle and you will see the content fall below. Also I tried using position:fixed on .quote but that causes problems with the soft keyboard on iOS and Android.
FIDDLE: http://jsfiddle.net/6u5AJ/
.foot_c {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
overflow-y:hidden;
margin: auto;
}
.footer {
background: #3c78bc;
position: relative;
text-align: center;
padding: 8px 0 5px;
text-align: center;
color: #FFFFFF;
z-index: 3;
}
.footerbg {
background: url(images/bgfoot.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 90px;
position: relative;
z-index: 1;
}
<div class="bg">
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="column">
<form id="myform" action="buttons.html" method="POST">
<input type="text" name="field1" placeholder="Enter your Zip"></input>
<input type="submit" value="Compare"></input>
</form>
</div>
<div class="quote">
<img src="images/quote_lady.png" alt="quote_lady">
</div>
</div>
<div class="foot_c">
<div class="footerbg">
</div>
<div class="footer">
<p>Your Guide to Auto Insurance Quotes!</p>
<div class="phone">
<img src="images/phone.png" alt="phone">
<h3><span>Call Now</span><strong>1-(999) 999-9999</strong></h3><br />
</div>
<br>Terms of Use | Privacy Policy
</div>
</div>
</div>
see if this helps,
For both version I change your HTML a little bit, remove the foot-bg, I didn`t understand why you had that, and merge your background options hex color with img url.
Check this fiddle to POSITION:RELATIVE
http://jsfiddle.net/luckmattos/6u5AJ/2/
Check this fiddle to POSITION:FIXED
http://jsfiddle.net/luckmattos/yXRS8/1/
On FIXED version I added a padding-bottom to the body make sure all content will appear:
padding-bottom:90px // = height of the footer
Let me kwnow!
The way I usually like to do this is by having the footer one of two children of a parent that has min-height:100 and position:relative. The first child of this is your content container and the second, obviously, is the footer. The content container is made to be 100% height of the parent and given a bottom padding large enough to keep it's content out of the footer which is absolutely positioned at the bottom of the parent.
Modified your example to show this. I didn't remove much of your CSS so it may not be clear where the changes are but basically the 'bg' div seemed to be your main container so I made that min-height: 100% (remembering to define 100% heights on all it's parents else it won't work) and then gave the 'container' div the 100% height and padding at the bottom big enough to show the footer.
Hope this is clear enough.
http://jsfiddle.net/jaredkhan/6u5AJ/3/
I'm developing a phone-gap application and testing it on 3 android devices. Some codes are:
Main area:
<body>
<div data-role="page" id="home">
<div class="banner"></div>
<div id="another_div">Welcome</div>
<div class="blank_div"></div>
<img src="img/connecting2.png" alt="Loading..." id="loading"/>
<div data-role="footer" class="footer_div">
</div><!--Footer-->
</div>
</body>
Some css:
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
display:block;
background-color:#FF0;
}
#now_play_div
{
white-space:pre-wrap;
font-size:1.5em;
position:fixed;
height:7%;
display:block;
background:#FFF;
width:100%;
text-align:center;
top:30%;
padding-top:1%;
-webkit-marquee: auto medium infinite scroll normal;
overflow-x: -webkit-marquee;
border-radius:10px;
}
.blank_div
{
width: 100%;
min-height:41%;
max-height:41%;
margin-left:auto;
margin-right:auto;
display:block;
}
.footer_div
{
color:#FFF;
position:fixed;
height:10%;
display:block;
background:#46639d;
width:100%;
text-align:center;
bottom:0px;
padding:1%;
}
Now the banner is fixed. blank_div is used so that my main content doesn't go under the fixed banner. After some work the loading image will be gone and filled with some dynamic content. I can scroll that content but my banner and footer is fixed. another_div is fixed too.
This system works perfectly on Sony ericsson(android version:2.3) and symphony(android version:4.0.4). But fails to work properly on Google nexus 7(Android: 4.3) In nexus while I scroll my main content that is dynamically loaded just under the blank_div the banner started to fall down. WEIRD!!!!!! While my contents go up, banner comes down. But in other 2 devices it works just fine. Does anybody know what's wrong?? Or what I'm missing?
I guess no more answer will come. So here is the answer which I found from #Era's comment.
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
left:0%;
display:block;
background-color:#FF0;
}
I am working on a mobile website have multiple input fields with background on the right, I have added the below css code for the same
.row input
{
width:100%;
padding:10px;
padding-right:30px;
font-size:18px;
background-repeat:no-repeat;
}
.row input.name
{
background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;
margin-right:10px;
border-bottom:1px solid #f0f0f0;
}
And the below HTML for the same
<div class="row last">
<input name="ccname" placeholder="Name on Card" validate="name" class="name validate" type="text" autocomplete="on"/>
</div>
On Native Android browser it looks repeated background for all input area.
Please let me know if I had mistaken somewhere.
I have noticed an error in your css
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;margin-right:10px;border-bottom:1px solid #f0f0f0;}
The background-position in your background CSS should only use left or right and then top or bottom values. There is one value too much.
.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right center;margin-right:10px;border-bottom:1px solid #f0f0f0;}
i would like to know about these features to implement it in an html file in eclipse for Phonegap android.
MATCH PARENT / WRAP CONTENT
I did not know how to give MATCH PARENT / WRAP CONTENT, so i gave as the following 2 ways
<div id="container" style="width:315px height:150px">
OR WHEN I GIVE
<div id="container" >
the problem i am facing is when i don't give any width..this element is an image,it goes till the measurement ends / the maximum limit.
SPACE BETWEEN THE DIV ELEMENTS AND SPACE VISIBLE IN THE LEFT AND THE TOP OF EACH ELEMENT
WHEN I GIVE THE FOLLOWING,THERE IS A GAP TO THE LEFT AND TOP OF THE VIEW
<div id="wrapper" style="width: 100%; float: left; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
HORIZONTAL SCROLL VIEW
FOR horizontal scroll view i gave
div#main
{ //background-image:url('img/image1.png');
position:absolute;
top:40%;
margin-top:-50px;
}
when we scroll the image,the backgrounds too scrolls...But, whereas i want the image alone to scroll bot the background...
WHAT SHOULD I DO?
so,please help me for setting MATCH PARENT,WRAP CONTENT,AND HORIZONTAL SCROLL VIEW IN HTML()PREFERABLY??
edit:code after suggesrtions
<div id="wrapper" style="width: 100%; float: left;padding:0px; margin:0px;">
<div id="container" style="padding:0px; margin:0px;">
<div id="head" style="background-image:url(mdpi/purple_navigation.png);"></div>
<h1 style=" margin-left:0px; margin-top:0px; padding:0px; margin:0px;"> ABC</h1></div>
<div id="wrapper" style="padding:0px; margin:0px;">
<div id="images" style="padding:0px; margin:0px;">
<marquee direction="left" behavior="alternate" scrolldelay="3" width="100% padding:0px; margin:0px;"><img src="mdpi/banner1.png"/><img src="mdpi/banner2.png"/><img src="mdpi/banner3.png"/><img src="mdpi/banner4.png"/><img src="mdpi/banner5.png"/></marquee>
</div>
<div id="title" style="padding:0px; margin:0px;"><h1>title</h1></div>
<div id="desc" style="padding:0px; margin:0px;"><p>description </p></div>
</div>
</div>
</body>
before changes
after changes
HOW SHOULD I BRING THAT TEXT AT HEADER(ABC/TITLE) TO THE CENTER?
To center the text for the header, all you have to do is to add text-align:center; to that div.
Also, I have changed a couple of things in this fiddle.
Is this the result you want, just without the background colors?
The changes I made was that I moved the #description div and added styles to some of the other divs.
Let me know if you have any other issues or if this isn't working for
you.
Hope this is satisfactory :)