I make html+css+js for PhoneGap android application and I have some issue: jQuery Mobile side panel doesn't stretch on page's height, so I used following code:
HTML
<div data-role="panel" data-display="overlay" data-position="left" data-theme="a" id="main-nav">
Navigation
</div>
JS
$("#main-nav").css({
"height": $(document).height() + "px"
});
In usual browser it works! Chrome for Android, Browser on Samsung Galaxy handle it correctly. But after compiling to .apk panel gets height not from document, but window, so it has viewport's height! What should I do with this?
what if you do
#main-nav {
position: absolute;
top: 0;
bottom: 0;
}
that should stretch your div to the available area of the parent (considering it's not taking all the viewport in itself).
Related
When I open an example of fixed content at the bottom of the page like this one, the content sticks at the bottom of the page in my desktop perfectly:
However, when I open this link in the FireFox in my mobile, as soon as my scroll reaches the end of the page, or if I tap the page, it will show an empty space after the fixed content, like this picture:
The css for fixed content is quite simple:
.w3-bottom {
bottom: 0
}
This works in FireFox desktop.
The question is what do I have to add to this class to work completely in mobile version of FireFox also.
I have made this sandbox, check the link to see how does the footer jump up and down in Mobile FireFox and not in Chrome.
I have to add this point that the scrollbar is disabled in my html and body tags:
<style>
/* Remove default margin */
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
</style>
I am developing a project in Ionic 4 (Angular). I have a page where I need to display some images.
The following code is used for image display:
<ion-row>
<ion-col col-12 *ngFor="let photo of photos">
<div style="position:relative;">
<button class="close" (click)="deletePhotoConfirmAlert(photo)"
style="right:0px; position: absolute; width:30px; height: 30px;
background-color: red; color: white">
<span>×</span>
</button>
<img [src]="getImageSource(photo.attachmentId)">
</div>
</ion-col>
</ion-row>
Where the button as the purpose of deleting an image, and the img tag is the image itself.
The [src] binding calls the function getImageSource, which actually makes an API call to the server and returns an image as a file:
getImageSource(attachmentId) {
return environment.apiUrl + 'attachments/download/?id=' + attachmentId;
}
This is how it looks like:
Web version:
Mobile version (iOS):
As you can see, the image is not being displayed on mobile, it is just a small white square.
I have also tried on an android device and the same thing happens.
I should also mention that if uploading a photo from the mobile device (taking a camera photo), the picture is again shown as the small white square on the device, but if opened on the browser it is displayed correctly.
Note: The image is only for testing purposes, therefore out of context.
Set image height and width and try again.
<img [src]="getImageSource(photo.attachmentId)" height="200" width="200">
Or
Check image url in browser.
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)
I am having a problem with Chrome on android mobile phones where an element on my webpage that is 100% width and height is going beyond the viewport?
It seems to work no problem on Android Browser, Firefox for Android, Chrome, Firefox and IE on desktop.
Link to my website: https://www.codesmite.com
If you shrink the page to a mobile size you will see the sidebar menu hides away off screen and a menu button appears to bring it back. When you click the menu button the sidebar transitions across to 100% width and height and the content transitions off the screen to the right. I have overflow:hidden so the content should not be stretching it wrapper but instead leaving the viewport, which works.
For some reason on Chrome for Android the 100% height of the element reaches all the way to the bottom of the page (It isn't fixed anymore, if you scroll down the menu items disappear). The width also stretches beyond the viewport width to the edge of all the overflowing content?
I can't work out what is causing this?
On your <div id='content'> you have
#media only screen and (max-width: 749px), screen and (max-height: 549px)
global.min.css:1#header:target~#content {
left: 100%;
Delete left: 100%; and will work;
Or add CSS: div#content{display:none;} when you open menu, both works for me.
I am setting the width and height of a div as a proportion of the viewport width and height respectively in a Ionic app. This works pretty fine on the explorer on my computer and on a device with Android 4.4. However, this propperty seems to have no effect on Android 4.2 (the height is limited to the text height). If I replace vh by % it keeps working on v4.4 but still not on v4.2.
Here is my code
HTML
<body ng-app="starter">
<ion-pane>
<ion-content ng-controller="langController">
...
<div id="language-selector" class="row">
<h2>Idioma</h2>
</div>
...
</ion-content>
</ion-pane>
</body>
CSS
#language-selector{
height: 10vh !important;
padding: 0;
background-color: #d1d3d4;
}
How can I make this work on Android v4.2?
Thank you in advance for your help.
There was a similar question to this issue and the only solution seems to write a JS function to update the height for Android <4.4.
See also at CanIUse.
One JavaScript solution could be:
// set initial height
document.getElementById("myDiv").style.height = (window.innerHeight / 10) + "px";
// change height on every resize event
window.onresize = function () {
document.getElementById("myDiv").style.height = (window.innerHeight / 10) + "px";
}
Try it out and resize the window height:
http://jsfiddle.net/3eb68vf2/1/
Hope it helps!