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;}
Related
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
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 need some help with displaying my background on mobile devices, the current code works on my browser but when I visit it on a mobile device the background crawls up to the top and is not visible, also the div for the other image does not react to the % i gave it. (I really have to use percents becouse it will make the site better for any mobile device)
I had this code working, but it was not in CSS but made in HTML itself, now i want to use CSS becouse you can not download the background anymore as picture.
<!DOCTYPE html>
<html>
<head>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<meta name="description" content="De Rolling Barrel is een revolutionair idee waarmee sporten & gamen een compleet nieuwe dimensie krijgt.">
<style>
body#background {
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-color: #e0e0e0;
background-size: 100% 100%;
}
div {
position: absolute;
top: 20%;
left: 11%;
width: 37%;
height: 70%;
overflow-y: scroll;
overflow-x: hidden;
}
div img {
width: 100%;
}
</style>
</head>
<body id="background">
<div>
<img src="text.png" alt=""/>
</div>
</body>
</html>
I used my Android phone to view the site btw.
Hope someone can help me or give me a push in the right direction.
Thank you very much!!
Either just put the background-image attribute on #background or just put it on body (in the css) no need for both. I understand you may want to contain the image, in which case you can just use the element name (#background) and set an overflow to none if the image bleeds.
If you have any more questions or need help with this, just comment and I'll set up a JS Fiddle for you.
I'm trying to create a simple 3 line menu dropdown for mobile screens. I've got something that works, but it doesn't look consistent across devices. The icon's vertical positioning is changing depending on the OS and browser version. The icon should be centered vertically, but I'm seeing:
Linux -desktop
Firefox - slightly low vertical centering.
Chrome - seems to be in the middle.
Windows 8 -desktop
Firefox - seems to be in the middle.
IE 9-11 - seems to be in the middle.
Android
Firefox - very low vertical centering.
Chrome - slightly low vertical centering.
Here is the sample HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
and the sample CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
}
and here is the jsfiddle link. Why won't the three line icon stay vertically centered?
Use line-height: 50px;, equals to the height of parent (div.mobile-bars) - TRY DEMO
HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
line-height: 50px;
}
[EDITED]
If you have <meta charset="utf-8"> inside the <head> element and using the CSS property line-height: 50px; doesn't solve your problem then I would recommend you to use an Image instead of html unicode character, If you really worry about Firefox on Linux and Android, icon's vertical position.
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/