Develop Reference

Div bottom toolbar appearing on iPhone but not on Android

I am making a web app that is adapted/responsive to mobile. I have a toolbar that is positioned on the right side of the screen on my computer browser, and it is supposed to be placed fixed at the bottom of the screen on mobile. The strange thing is, when it is opened using an iPhone, the toolbar appears properly fixed at the bottom, but when I open the app on an Android device, such as my Samsung Galaxy S5, the toolbar is not appearing at all. Doing some testing, when I changed my styling to be relative instead of fixed, the toolbar is displayed in the same position in the middle of the screen on both iPhone and Android. What do you think the issue may be?
Here is the code:
<div class="col-sm-2">
<div class="sidebar-nav-right">
<div class="navbar navbar-default navbar-style" role="navigation">
<div class="nav">';
<a class="brand font-26 block brand-color">Tools</a>
<ul class="nav navbar-nav center">
<li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
</div>
.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}
This styling is inside a media query for smaller screen sizes and, as stated above, is adapting on a mobile device of one brand so I know there isn't a problem with the media query.

If add {left: 0} can't solve it, I guess maybe the parent node of .sidebar-nav-right have the transform; then the position origin has been reset.

this is a common problem on older Android browsers. Simply add -webkit-backface-visibility: hidden; to the fixed element.
There are two ways to fix this. See this article by Brad Frost for a list of Javascript solutions: http://bradfrost.com/blog/mobile/fixed-position/
Or try the above mentioned fix by Ben Frain: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
See this CodePen by Ben Frain as well: http://codepen.io/benfrain/full/wckpb

I think #GoreWang's comment is spot on. You should try the following 2 things:
(1) With fixed position, sometimes not having a left property set causes the fixed element to not appear when the page loaded. Try adding the following:
.sidebar-nav-right {
left: 0;
}
(2) Add following code to your fixed element:
.sidebar-nav-right {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.(Known bug)

Planning a cordova camera plugin with transparent overlay image

I am writing and app which needs to show a transparent image over the camera, for example as a guide for composition. The app has to be shipped at least on iOS and Android.
So far, I have found a plugin with a functioning iOS source (okstate-plugin-camera-overlay, available on Github), and a possibly working solution for Android.
None of these is satisfying, both compile and run with a host of warnings and quirks. I think I want to plan a new plugin with this functionality and a clean and minimal implementation.
Where could I look for directions for creating a lean plugin supporting both platforms and for a way of decorating the camera functionality in the least intrusive way on both platforms?
update
see the comments: I make a fork in cordoba-plugin-camera and made it work for iOS. Now I need directions to create a transparent overlay over the camera in Android.
update 2
I am using successfully the version of the plugin that Weston Granger has modified, and it has none of the problems that plague the original version.
It works for me on iOS and Android with equal smoothness.
This is the code I am using
I am using the version of the plugin that Weston Granger has modified
This is the relevant portion of code. It will show the camera behind an image.
CameraPreview.startCamera({
x: 0,
y: 0,
width: screen.width,
height: screen.height,
camera: "back",
tapPhoto: true,
previewDrag: false,
toBack: true
});
CameraPreview.setOnPictureTakenHandler(function (picture) {
savePicture(picture);
CameraPreview.hide();
CameraPreview.stopCamera();
history.back();
});
$("#clickButton").click(takePicture);
$("#switchCamera").click(CameraPreview.switchCamera);
$("#exitButton").click(function () {
CameraPreview.hide();
CameraPreview.stopCamera();
history.back();
});
Regarding the html template for the image, it is just a page with transparent body and an image. The image should have transparent area, if you want to see through the camera preview.
I have shown also the buttons, but this is code you should tailor to your needs.
<!-- camera.html -->
<style>
body {
background-color: transparent;
background-image: none;
}
div.cameraButtons {
position: fixed;
text-align: center;
background-color: black;
bottom: 0px;
width: 100%;
}
</style>
<div class="cameraContainer">
<img align="center" src="assets/{{frame_image}}" />
</div>
<div class="cameraButtons">
<a id="switchCamera" style="float: right; margin-right: 8px">
<i class="material-icons md-48" >camera_rear</i>
</a>
<a id="clicButton" >
<i class="material-icons md-48" >photo_camera</i>
</a>
<a id="exitButton" style="float: left;">
<i class="material-icons md-48" >backspace</i>
</a>
</div>
<!-- /camera.html -->

horizontal image gallery - white-space: nowrap messing up max-height: 100% on Firefox for Android

I like to build horizontally laid out, vertically-fitted image galleries like this:
<html style="height: 100%">
<body style="height: 100%">
<div class="someContainer" style="height: 100%">
<div class="galleryContaineer" style="height: 100%; white-space: nowrap;">
<img width="1000" height="2000" style="max-height: 90%; width: auto; height: auto" />
...
</div>
</div>
</body>
</html>
This seemed to be fairly well supported... Well, until i tried it on Firefox for Android (31.0 on 4.4.4). Which probably no one uses.
Apparently the nowrap causes Firefox to compute the body's height way to big, which kills the vertical-fitting. Consider this fiddle: http://jsfiddle.net/W5a6V/7/ which you might have to open unwrapped http://fiddle.jshell.net/W5a6V/7/show/ (if this link ends up dead, just inspect the proper fiddle and open the result iframe's src in a new tab) because the iframe somehow fixes this mess.
Sorry #jsfiddle for a whole bunch of binary :) — alternatives welcome.

After a couple of hours I resorted to a technique which I gave up for the less CSS-heave approach shown above.
You have to force Firefox to limit the body's height to the actual viewport's height, which can be done with media queries, like this:
#media screen and (min-device-height: 0px) { body { max-height: 0px; } }
#media screen and (min-device-height: 100px) { body { max-height: 100px; } }
#media screen and (min-device-height: 200px) { body { max-height: 200px; } }
And so on. I guess there is a cool name for this. It's pretty robust and helped me in circumstances where the imgs had to be individually wrapped in some kind of container, too, think captions.
If one of your containers is positioned absolutely, you might have to apply the max-height to it, instead of the body.
While I fixed this - see answer below - other ideas are highly appreciated.
Here's the fiddle: http://jsfiddle.net/W5a6V/9/ and http://fiddle.jshell.net/W5a6V/9/show/ respectively.
Update: Forgot to check back in Webkitland... where it does break the original layout. Gotta target Firefox by adding and (-moz-touch-enabled: 1) to the media query. Yuck!

Sticky footer is causing content to fall below fold [closed]

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/

JQuery-mobile popup scrolling not working on Android

I am using Phonegap with JQuery-mobile, I have a popup with a lot of text in it, it scrolls fine on iOS, but when I test on various Android versions, the scroll just doesn't work. It seems the popup is not listening to the scrolling events.
Here is a example of my setup, not exactly the same because I am using Backbone view to handle the loading of everything, but the final html should be similar.
my code setup more or less is like
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div id="scrollable_div">
<div id="inner">
<ul>
.....
....
</ul>
</div>
</div>
</div>
<div data-role="footer">...</div>
</div>
<div id="popup_wrapper">popup is loaded into this div programmatically and called popup</div>
http://jsfiddle.net/VRwLX/

What if you try forcing a height to popup? Seems like Android is not being aware of the popup's size.
[data-role="popup"] {
position: relative; // the parent container probably needs a position context also.
height: 90%; //just not to block the full screen - it is a popup :)
overflow-y: scroll;
}
Worked on my JellyBean Android stock browser, should behave similarly on Phonegap's webview.
If the above doesn't work, delete the position: relative and replace the height by a 'real' value (pixels) instead of a relative value.