I've been struggling with this one for a while. I'm using skrollr on a new site, and it is working great on the desktop. However, the content is getting cut off on ipad and android touch devices after turning the device from either landscape to portrait or vice versa. It is very similar to the problem described here : Skrollr cutoff on iPad, but the solution they recommended there is not fixing the problem for me.
This can sort of be fixed by adding padding to the bottom of the skrollr-body div, but the amount needed changes between portrait and landscape. The page seems to need a refresh when that is changed, so CSS and media queries aren't cutting it for me at the time.
Any ideas? Really digging Skrollr otherwise, but this is driving me crazy.
Here is the link for viewing :
http://rweststaging.com/stackoverflow/test.php
Here is the basic code :
// Top fixed section
<div id="animation"
data-0p="position:fixed; top:0%;"
data-100p="position:fixed; top:0%;"
data-120p="position:fixed; top:0%;"
data-210p="position:fixed; top:-130%; opacity:1; display:block;"
data-220p="opacity:0; display:none;"
>
</div>
//lower content section
<div id="skrollr-body"
style="position: absolute; top: 220%; width: 100%;"
data-top="" data-bottom=""
>
//content sections go here
</div> // end skrollr body
//skroller init
skroll = skrollr.init({
// mobileCheck:function(){return false;},
forceHeight:false,
smoothScrolling: true,
smoothScrollingDuration: 600
});
I've experienced issues putting by not having the #skrollr-body div independent (as this inherits a new function when detecting mobile).
So try wrapping your #skrollr-body div around your div with sections -
// Top fixed section ...
<div id="skrollr-body" style=""> // no styles
<div class="nonfixed" style="position:absolute; top:220%; width:100%;">
// all non-fixed elements
</div>
</div>
Related
I have implemented ngx-chips for an email CC field. It works perfectly in my Android phone using Chrome. But, in iPhone, the autosuggestion does not show up.
<div class="required form-group col-md-12 col-sm-12 col-xs-12" >
<label class="control-label" for="email.emailCc">CC:</label>
<tag-input [(ngModel)]="emailList" [onlyFromAutocomplete]="true" theme='bootstrap'>
<tag-input-dropdown [autocompleteObservable]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false">
</tag-input-dropdown>
</tag-input>
</div>
In Iphone
In Android
Please help.
Added following line in global.scss for IOS to show dropdown content,
div.ng2-dropdown-menu.ng2-dropdown-menu---width--4.ng2-dropdown-menu--open {
display: block !important; // to display the drop down content
max-height: 40vh !important; // for scrolling of suggestion list
}
But still it is not good as it is on android. Scrolling the screen scrolls the list with it.
We were facing the same issue. The problem is not data showing up, rather the placement of the dropdown due to the Zoom of textbox in IPhone. With css hacks we were able to place the drop down in proper position.
I have this simple html that uses a tiny bit of bootstrap:
<div id="A" class="col-4">
<div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
*some content*
</div>
And its corresponding CSS:
.img { width: 100%; height: 100%; }
Everything is in this pen : https://codepen.io/anon/pen/EbBGQw
The image correctly displays on the entire height of the parent div on either Chrome or Firefox, either Windows or Android :
However, on iOS devices (tested on iPhone and iPad recent browsers), the images don't show up :
I've done some digging and cleared some potential culprits :
I'm not using position: fixed;
My images aren't too large
I'm not using the background shorthand
What I have found, however, is that entering any text inside the "img" div will make the background-image appear behind the text. The image still won't cover the entire div, but it does appear.
Why is Safari not showing the image properly ? What is the best way to deal with the issue and have the image properly cover its entire div ?
When you set the height to 100% :
The height will only be as large as what is inside the element.
If there is nothing inside, the height will be 0.
If there is a paragraph (as shown here), the height will be as large as the paragraph. I suggest using either pixels, rems or ems instead.
The way you wrote your image style background did not work in chrome either. I put it in the img class instead and it worked.
If you don't want to add the background image to your img class, you could do this instead:
<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>
.img {
width: 100%;
height: 100%;
background-image: url("image.jpg");
}
<div class="img"><p>Testing</p></div>
After more digging, and the suggestion from #Michelle Cantin, I found out that the height: 100% from my CSS is ignored by Safari.
In this great answer, a fix is proposed using position: absolute;. I applied relative position to the parent element (#A) and absolute positioning to the child (.img), which fixed the issue.
The image can be seen covering the entire left column for as heigh as the right column goes in this pen : https://codepen.io/anon/pen/bYPzew
Facing an issue in iPhone, creating a chatting web application. Having chat window on pop-up fixed position. when click on text input to send message, iPhone keyboard open it and shift the header part of chat section to top
Need to fix
Header and text-area should always be visible same as in whats-app
Set header-part to fixed position and same text-area on fixed, even keyboard is open or not
Prevent this shifting of header on top means prevent the iPhone scroll
Note: It is working fine in Android phone. Only issue with iPhone browsers, may be due to iPhone scroll.
Here is a simple conceptual example :
<article class="pop-up">
<h3>Title</h3>
<div class="content"> <p>Some scrollable content ...</p> </div>
<div> Some CTA buttons that should be visible for the user </div>
</section>
CSS:
.pop-up {
position: fixed;
// some other styles to display it as a popup
}
.content {
position: relative;
max-height: 100px; // set any max height that fits your design
overflow-y: scroll;
}
[Using jQuery Mobile version 1.3.2]
I'm working on a jQM project and am running into a bit of a dilemma here. For pages that don't have much content (such as a home page with only 3 buttons on it), and when the footer data-position is set to "inline", there is a big ugly gap below the footer...
Of course, if I set the footer's data-position to "fixed", then it looks good IF viewed in portrait mode...
BUT... when it's viewed in landscape mode, it looks bad, as there is barely any room for the content area, due to the header and footer taking up most of the visible area...
So, my question is... is there a good, working solution for getting the footer to be fixed to the bottom in situations where the content area does not fill up the entire screen, and then have the footer position automatically switch to "inline" for situations where the content area DOES fill up (at least) the entire screen?
OR... alternately... is it possible to have the footer position "fixed" when the device is in portrait mode, and then switch the footer position to "inline" when the device is in landscape mode?
I've spent a few hours researching this online today, but I haven't found any promising solutions to this problem so far (I found a handful of articles / forum posts that addressed the topic, but they were from 2-3 years ago, and the few proposed "solutions" looked like they might create more problems than they solve).
I'm not looking for a solution that is 100% cross-browser (because I know that doesn't exist), but as long as I can find a solution that works well on mobile iOS and mobile Android, I'd be happy.
I would imagine that this would be a fairly popular issue, so I'm a bit surprised that I haven't come across a good solution so far (maybe I just haven't looked in the right place yet).
So.... any ideas?
Thanks!
You can listen to the resize and orientationchange event and then fix/unfix the footer depending on available space.
Here is a DEMO
Using script, measure the header height + footer height + content height and compare it to the total window height (viewport). Then add or remove the ui-footer-fixed class on the footer div:
$(document).on("pagebeforeshow", "#page1", function(){
$(window).on("orientationchange resize", function(){
FooterPositionFixed()
});
setTimeout(FooterPositionFixed, 300);
});
function FooterPositionFixed(){
scroll(0, 0);
var totHeight = $(window).height();
var headerHeight = $("#jqmHeader:visible").outerHeight();
var footerHeight = $("#jqmFooter:visible").outerHeight();
var contentHeight = $("#jqmContent:visible").outerHeight();
if (totHeight > (headerHeight + footerHeight + contentHeight)){
if (!$("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").addClass("ui-footer-fixed");
}
} else {
if ($("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").removeClass("ui-footer-fixed");
}
}
}
Here is the HTML for this script:
<div data-role="page" id="page1">
<div data-role="header" id="jqmHeader">
<h1>My page</h1>
</div>
<div data-role="content" id="jqmContent">
<ul data-role="listview">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" id="jqmFooter">
<h2><a>Go to website</a><br />Copyright<br /> business name</h2>
</div>
</div>
I have an image in my jquery mobile fixed header. When the page loads in Google Chrome or Apple Safari the header content overlaps the content div below the header until I resize the page. Firefox and IE work just fine.
Thanks!
I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the .ui-page element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.
You could also do this, although it seems pretty hacky to me, force a redraw by triggering the resize event on document.ready or maybe window.load:
$(window).on('load', function () {
$(this).trigger('resize');
});
I pasted this code into the console while on your page and it re-positioned the title element as expected.
Does applying the following CSS help?
.ui-page {
padding-top: 91px !important;
}
Note that you will have to refine the selector as this will apply to overlay popups either.
I had lots of trouble with this. This worked until I wanted to add a link:
<div data-role="header">
<img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>
Note the empty h1 tag.
I ended up not using a data-role="header" at all, I just couldn't get it to work with a link. I used a ui-bar class instead. Like this:
<div class="ui-bar ui-bar-a">
<a href="/" data-role="none">
<img border="0" src="images/logo.png" style="float: left; display:inline">
</a>
</div>
A solution based on #Jasper answer that worked for me was:
$(document).on('pageshow', "div[data-role='page']", function () {
$(window).trigger('resize');
});
It has an improvement that apply to all the jquery mobile pages
I played with the rather good solutions from Jasper and Carlos487 and found this to be the most up-to-date and reliable way to do it (jQM 1.4.x):
if it's due to an image without specified dimensions that will need some time to load and thus may cause the header to enlarge, then specifying the known dimensions (ideally via CSS) should do it. Otherwise there should be a way to determine if it has finished loading and thus applying the idea of solution 3 below.
if it's is due to some (maybe) unknown header resize event (e.g. through some image loaded later or some other content shrinking the header and thus making it vertically bigger), then this should work with a reasonable big enough timeout value:
$( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
// maybe value > 100 needed for your scenario / page load speed
setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}
if you know what is causing this (as in my case, where I am right shifting the page content on large screens via some (otherwise hidden/overlayed) left aligned navigation panel), then the following may be even better, beeing independent of the actual time the page needs to load on some device or scenario (which may be longer than your predefined timeout above):
// if its due to some animation like in my case
// otherwise try to find a similar way to determine when the resizing event has
// completed!
$('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });
(I am not sure if Jaspers solution using $(window).on( 'load', ... will be correct in all jQM page load scenarios (with AJAX page navigation). That's why I would prefer Carlos487's approach in my example.)
None of the solutions above worked for me. But I found out my problem lies in the events after the page navigation. If the content div is hidden during this time, it doesn't get positioned under the header div, rather stays in its original place:
$(document).on("pageshow", "div[data-role='page']", function()
{
$("#pageContentDiv").hide();
setTimeout(function()
{
$("#pageContentDiv").show();
}, 0);
});
EDIT:
Found a better solution; set header div height and page div top padding to the same value:
<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">
Hope this helps.