I am using angular version 6 with material design. I have created one page which uses sidenav component on material design and its stackblitz link is https://angular-pxw1qr.stackblitz.io/sidenav. When i open sidenav page in any Iphone and pull down or pull up the screen sidenav content goes behind the page content and white background is coming at top or bottom of the page.
What i can do to remove this behavior ?
You're missing the fullscreen attribute on your sidenav container:
<mat-sidenav-container fullscreen>
<mat-sidenav #sidenav>
<!-- ... -->
</mat-sidenav>
<mat-sidenav-content>
<!-- ... -->
</mat-sidenav-content>
</mat-sidenav-container>
Note that this is just used for styling and does not serve any other purpose.
See the sidenav's stylesheet, as well as the mat-fill mixin for more info.
Related
I have an app that uses Angular Material Design 2 (wrapped in Cordova) and has a toolbar and sidenav. On notched phones that run iOS (like the iPhone X), when the user scrolls the content on the page is visible above the toolbar where the notch area is. This doesn't happen on my LG G7, which has a notch and is running Android, though that may just be my settings because I think I remember "hiding" the notch.
I've sort of proven that this isn't phone specific by taking the example StackBlitz that Material Design provides for responsive layout and deliberately adding some margin to it to create an artificial space. See here: https://stackblitz.com/edit/angular-pdh21g . When you scroll, you can see where the content is still visible above the toolbar. I am wondering what CSS I need to add to force the content's top limit to remain below the toolbar? I tried various settings for the meta tag in my HTML for viewport-fit, but nothing seems to change it. Here is what it is right now:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
So essentially, I need to either force the top of the page to be below the notch, or force the content to stay below the toolbar.
EDIT: I just realized that the HTML portion might be relevant because it uses "fixedTopGap" - a portion of it is below:
<mat-sidenav-container class="example-sidenav-container"
[style.marginTop.px]="mobileQuery.matches ? 56 : 0">
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
[fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
<mat-nav-list>
<a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<p *ngFor="let content of fillerContent">{{content}}</p>
</mat-sidenav-content>
</mat-sidenav-container>
TLDR;
Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;
I'm having an issue with jQuery Mobile and scrolling.
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
The scrolling divs are as follows
HTML:
<div class="list">
<input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
<label for="Cover26">
<span class="check"></span>
<img src="http://placehold.it/110x170" class="background">
</label>
</div>
CSS:
.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
.list input{position:absolute;top:-999px;left:-999px;}
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
First view of page
Elastic scrolling happening when page isn't at bottom
At actual bottom of page
Elastic scrolling happening when page isn't at the top
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
Page with jQuery Mobile which doesn't work
Same page without jQuery Mobile which does work
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
Demo (1)
(1) Tested on iPhone 5 - Safari
I have a strange problem with jQuery Mobile page transitions.
Demo can be found here:
http://www.dev.theorie24.ch/mobile_index.php
If you click on "ANMELDEN" the new page gets loaded, but without the background gradient and some other styles missing.
After refreshing the new page, it looks fine. But then, if you go back (browser back button or arrow to the left on top), the first page gets displayed with some styles messed up.
What is happening here? How can I enforce the correct display of the whole page after the transition?
EDIT:
After the page transition, this is how the DOM looks like:
The body-tag actually closes much too early. This can't be right. Is that a bug in jQuery Mobile?
Thanks a lot!
Chris
I think the problem is that in your second html file data-role attribute applied to the body.
Try to wrap the content with div element with data-role="page", like so:
<html>
...
<body>
<div data-role="page">
<!-- content -->
</div>
</body>
</html>
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
is there anyway to reference jquery ui icons as regular images anywhere in my site?
If you've linked to the jquery CSS, you can get at the icons by applying the .ui-icon base class and the specific icon class (e.g - .ui-icon-close for close button) to your element (usually span)
The jquery wiki has a comprehensive list of icons and their classes, you can find it here : http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework
Just inspect the icon and get the class.
EDIT
Sample usage
<span class="ui-icon ui-icon-zoomin"></span> <!-- Shows a magnifying glass -->
<span class="ui-icon ui-icon-play"></span> <!-- Shows a play button -->
Take a look at this code snipplet: http://www.xinotes.org/notes/note/773/
you can use icon classes from jQueryUI Icons Cheatsheet