I am building an android app using phonegap.The problem is that when i click on input box the top div moves to the right a little bit.
HTML:
<div id="top">
<img src="icon-menu.svg" width="40" height="41"
onerror="this.onerror=null; this.src='icon-menux.png' ; this.height='35' ;" class="show a">
<a href="index.html">
<img src="home.png" width="50" height="41" id="home" >
</a>
</div>
<input id="filter" placeholder="Enter game title" type="text"/>
CSS:
#filter{width:100%;
height:35px;
font-size:20px;
background-color:#F2F2F2;
color:#FF3300;
text-align:center;
z-index:20;
margin-top:70px;
positon:absolute;
}
#top{background-color:#434343;
border-bottom:5PX SOLID #888888;
height:50px;
width:100%;
position:fixed;
z-index:50;
display:block;
float:left;
}
Update:I found out the source of the problem.It does not happen when I remove this code
<meta name="viewport" content="width=device-width, user-scalable=0">
But the problem is that when I remove this tag the top div moves up when I scroll which should not happen since I already specified z index and position fixed.
I am unable to post image since i dont have enough reputation.Srry
I had a similar problem which someone was kind enough to answer, I think the same might apply to you!
That is because ChromeView adds a border to a focused element and it sounds like it's pushing everything else around.
Add this to the top of your css file to tell the browser to stop highlighting fields when they're focused;
* { outline: none !important; }
Related
When user is clicking on input field to put email or password my footer is coming up on the fields .
<div class=" bar bar-footer myfooter ">
<p class="login-p">Don't have an account?
<b class="forgot-details-link">
<a ng-href="#/signup" ng-click="reload('signup')">Sign Up</a>
</b>
</p>
</div>
Css
.myfooter{
background-color: transparent;
display: block;
position: fixed;
background: rgba(250, 250, 250, 0.07);
border-top: solid 1px rgba(250,250,250,0.30)
}
What I want to know is because it occupies the directives ionic delivery for you, for example in the documentation is clearly the footer in question.
<ion-content class="has-footer">
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
If you take this structure, combined with its css, you should not have display problems. Also I suggest that modifications of these classes and added to the framework, only modify colors, text sizes, fonts, etc, since they are ready to run correctly. This is only if you occupy these directives.
just add scroll="false" to your <ion-content scroll="false">
and also please check in controller to add this :
cordova.plugins.Keyboard.disableScroll(true);
I am very new to Phonegap. I am developing an app for display some text contents(some times images) from web. I want to add a zooming option to the app(only for content). When I am enabling pinch zoom, it zooms the entire webview(including the action/title bar). I want to zoom only the content part. I used IScroll, but couldn't work. Please help me.
I am giving my code below. If any problem, please let me know.
<!DOCTYPE html>
<html ng-app="nakApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Daivadasakam</title>
<meta name="description" content="">
<link rel="stylesheet" href="assets/app.css"/>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes">
</head>
<body>
<div ui-view></div>
<!-- injector:js -->
<script src="vendor/jquery.js"></script>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/home.js"></script>
<script src="app/services/servive.js"></script>
<script src="app/router.js"></script>
<script src="app/filters/interpolate.js"></script>
<script src="app/directives/directives.js"></script>
<script src="app/controllers/language-selector.js"></script>
<script src="app/config-generated.js"></script>
<script src="app/controllers/data-content.js"></script>
<!-- endinjector -->
</body>
</html>
There is another file on www/app/templates. data-content.html(Assuming that it is the template for data display). I am giving the code below
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
If I understood you correctly, what you want is to have a div that's size doesn't change when the zoom is applied on it, right?
Main idea
You simply make fixed-size div (#container) that contains another div (#content) which again contains the actual content. The container is always the same size, only the content div changes size based on it's content. The container can handle the overflow anyway it wants such as auto (show scroll bar when too wide or long content) or hidden.
<div id="container">
<div id="content">
<!-- Content here -->
</div>
</div>
Then apply CSS3 transform on the content when zoomed. For example's sake the transforms are applied on when hovering the content but for your case see my comments below the code. What is basically done when hovering is the zooming part (scale transformation) with factor of 2 in this example and then it is moved (translate transformation) to start from top-left corner.
#container {
width: 600px;
height: 600px;
top: 100px;
left: 100px;
position: absolute;
overflow: auto; // Or hide or scroll or what you prefer
}
#content {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: gray;
}
#content:hover {
transform: scale(2) translate(25%, 25%);
}
Example
I made JSFiddle for you to play with it. Please note that the hover effect is used only for the example to be more compact. Also I am not much of a CSS guru so there probably is still some minor problems. Also for actually using that code, consider adding the -webkit-transform, -moz-transform, -o-transform and -ms-transform to make it work on all possible browsers.
How to zoom
What comes to the how to zoom (pinch or Google Maps style zoom buttons), it mostly just depends what you want to do with this. For example if you prefer the pinch hand gesture, look into this. On my example it was most easily showed with hover. I think you need to anyway use JavaScript to make the zooming since you cannot set the multiple values for zoom level on CSS.
Apply on your actual code
In case that the code added by you to your original question is your template, and if the div with list-data-language class is for example the one that you want to be zoomable, your code should look something like this
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div id="container">
<div id="content" class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
As you can see I added one div with id container and added id content to for div with class list-data-language.
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 have a very unusual bug that appears on my Android 4.0 on Galaxy Note. Some friends see the same on their Galaxy S3. I simplified my code to the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;}
.player, .project-info {width:100%}
#movieplayer .short-info {width:100%;background:green;display:block;position:relative;}
</style>
</head>
<body class="works">
<div id="global-container">
<div id="movieplayer">
<div class="player">
<div class="project-info movie">
<div class="short-info jspScrollable">
<div class="container">
hello
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you first load up this page in PORTRAIT, you should see a green bar on top of a yellow background. They both fill the screen width 100%. When you rotate the phone to landscape, the yellow continues to fill the rest of the screen, but the green bar fails to fill the remaining width. Why is this?
I am using #movieplayer{position:fixed;} here because in my real code, I rely on that to do some other stuff. So I can't use position:absolute.
This issue seems like a bug in certain versions of the android browser.
The set of elements under the fixed-position container aren't asked to recalculate their width (during reflow) as a result of the resize event.
Your solution works, as it is one of several ways to force this recalculation to occur.
Oddly enough, we've found that any landscape-specific media query in css fixes it for us.
(tested on Galaxy S3):
#media screen and (orientation: landscape){
.doesnt-exist { background:red; }
}
Related links :
Android Issue 27959
Android Issue (dup) 25610
OK, I was able to hack a solution together. I have jquery installed, and then I did a
$('.short-info').css('position','absolute');
setTimeout("$('.short-info').css('position','');", 0);
This is ugly, but it works.
It seems like some versions of the default android Browser have a rendering issue. If I create a page where I have some sort of input field and a button, when I disable the other input field, the button appears grayed out (unless this is done on page load, you have to click around / zoom for a bit to get the browser to re-render).
The interesting thing is, it does not apply the disabled STYLE to the button, but simply grays it out. Here is a sample.
Link to editor jsfiddle
Link to embedded jsfiddle
CSS:
ul { list-style-type:none; }
.xxx {
background: blue;
color: white;
}
.xxx:disabled { background-color: red; }
HTML:
<div id="root">
<ul>
<li>
<input name="x" id="enable" class="x" type="radio">Enable</input>
</li>
<li>
<input name="x" id="disable" class="x" type="radio">Disable</input>
</li>
</ul>
<input type="button" class="xxx" value="Button"></input>
</div>
JS:
$(function() {
$('.x:eq(0)').prop('disabled', true);
});
Things to note:
The button is NOT disabled. Click on it and it temporarily gets un-grayed-out.
There is a style for the button's disabled state that sets its background color to red (if you disable the button, you will see this work), but the button does not appear red in the example, so it's not even just rendering the disabled style. It seems to mainly just set the opacity to a lower value
A button BEFORE the radio buttons will not be affected. http://jsfiddle.net/YVFVZ/4/
Any ideas how to work around this?
I finally figured it out. I'm not really happy with this solution, but it seems to work.
If you wrap the inputs in a position: relative element, it fixes the problem.
Try using this DOM
<div id="root">
<ul>
<li>
<input name="x" id="enable" class="x" type="radio" />Enable
</li>
<li>
<input name="x" id="disable" class="x" type="radio" />Disable
</li>
</ul>
<input type="button" class="xxx" value="Button" />
</div>
and also js as
$(function() {
$('.x:eq(0)').prop('disabled', 'disabled');
});
May be this could help.
Let's clean up some of that HTML!
Have a fiddle - Fiddle Link!
Put in some proper labels
Remove the closing </input> tags which are invalid HTML. Let's self close them to make them pretty (even though this is not required unless you are using XHTML).
Remove the <ul> which seems superfluous when we can use a little sprinkle of CSS to position your form elements.
Rename those classes to something more relevant!
HTML
<div id="root">
<input name="buttonState" id="enable" class="action" type="radio" />
<label for="enable">Enable</label>
<input name="buttonState" id="disable" class="action" type="radio" />
<label for="disable">Disable</label>
<input type="button" class="button" value="Button" />
</div>
jQuery
So you want to enable the button when the enable radio button is clicked and disable when the disable radio button is clicked? Here:
$('#disable').click(function () {
$('.button').attr('disabled', true);
});
$('#enable').click(function () {
$('.button').attr('disabled', false);
});
Finally, the CSS.
.action {
display: block;
float: left;
clear: left;
margin: 0 10px;
}
label {
display: block;
margin: 10px 0;
}
.button {
background: #00F;
margin: 0 10px 10px 10px;
}
.button:disabled {
background: #F00;
}
input, label {
cursor: pointer;
}
Lovely :)