If I am open popup alert or custom modal view controller , still background content is scrollable, I don't want to scroll that background content if pop/modal is open.
I have tried below links :
https://forum.ionicframework.com/t/popover-background-still-scrollable/59874/3
https://github.com/ionic-team/ionic/issues/11712
Still not found any solution.
in .html file :
<ion-content #scrollArea >
</ion-content>
in .ts file :
#ViewChild('scrollArea') mainContent: Content;
and set true by this method when modal open and set false when modal dismiss....
private setDisableScroll(disable:boolean)
{
let scroll = this.mainContent.getScrollElement();
scroll.style.overflowY = disable ? 'hidden' : 'scroll';
}
Related
I'm having trouble finding documentation on this.
In Ionic, the menu has functionality where if you click on the backdrop, the menu dismisses. So basically click anywhere except the menu and the menu goes away. I want to disable this functionality so users can interact with items below the backdrop.
I've tried disabling pointer events on the backdrop and the menu, but the dismiss still seems to occur. Any thoughts?
Interesting discovery; the menu dismiss functionality actually looks like it might be on the ion-content. Which leads to an issue:
I want users to be able to interact with the content with ion-content without dismissing the menu.
For me, this helped:
ion-menu {
pointer-events: none;
}
ion-menu > * {
pointer-events: all;
}
Here is the sample code how you can do this in your ionic application.
import { Platform, MenuController } from 'ionic-angular';
// ... Other code
constructor(menuCtrl: MenuController /* ... other code ...*/)
// ... Other code
let menu = menuCtrl.get();
menu.swipeEnable(false); // Disable drag to open/close
// Override default behaviour of closing the menu on
// content or backdrop click
menu['onBackdropClick'] = () => {
// No-op
};
menu.ionOpen.subscribe(() => {
// When the menu is open ...
// Remove Ionic's CSS rules for menu-content-open class that restricts
// mouse events on ion-nav
menu.getContentElement().classList.remove("menu-content-open");
// Reduce the size of the content pane so that it does not
// overflow off the screen
menu.getContentElement().style.width =
`calc(100% - ${menu.getMenuElement().clientWidth}px)`;
});
menu.ionClose.subscribe(() => {
// When the menu is closed ...
// Restore the size of the content pane
menu.getContentElement().style.width = '';
});
I made a stackblitz project you can check it out. You can check it out from here.
I would like to create a multiple step modal dialog - like a wizard. A series of screens that follow on from one another.
I'm using the code from NativeScript's site to display a modal (https://docs.nativescript.org/core-concepts/navigation#modal-pages)
var modalPageModule = "./modal-views-demo/login-page";
var context = "some custom context";
var fullscreen = true;
mainPage.showModal(modalPageModule, context, function closeCallback(username, password) {
// Log the user in...
}, fullscreen);
The code works, but I'm unsure how to change the modalPageModule once the modal is displayed.
Possible duplicate
Nativescript: How to use navigation in modals
https://github.com/NativeScript/NativeScript/issues/3753
I have a draggable modal window and users move it around. They want it to open at the original position, every time they close the window and reopen again. How can I do that? Thanks.
You can use bootstrap modal events
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
by default the bootstrap modal slide-down from top and if position of modal changes while dragging, it can be rest to original position with show.bs.modal when close and re-open next time.
$('selector').on('show.bs.modal', function () {
// do something...
});
Demo Fiddle modal slide and open in middle
In above fiddle, added a custom position to modal so modal slide and open in middle of the page
.modalnewposition {
-webkit-transform: translateX(-0%) translateY(25%);
-moz-transform: translateX(-0%) translateY(25%);
-ms-transform: translateX(-0%) translateY(25%);
transform: translateX(-0%) translateY(25%);
}
HTML
<div id="myModal" class="modal fade modalnewposition" role="dialog">
Then created another class
.original {
transform: translate(0px, 0px);
transition: transform 0.3s ease-out 0s;
transition: opacity 0.15s linear 0s;
}
Using show.bs.modal I added the original selector to modal so it adjust it's position before showing and override the modalnewposition selector so modal slide and open at top instead in middle of page.
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
$('.modal').addClass("original");
});
});
Demo Fiddle modal slide and open at top
Above example is just to demonstrate that what you asked is achievable with show.bs.modal function.
Add this code to js and execute it every time modal window closes:
var scrollableContentOfModal = document.getElementById(...);// change it accordingly
document.querySelector(scrollableContentOfModal).scrollTop = 0;
I have 2 views as follows
.state('tab.matches', {
url: '/matches',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches.html',
controller: 'MatchesCtrl'
}
}
})
.state('tab.matches-detail', {
url: '/matches/:matchId/:userId/:userName',
views: {
'tab-matches': {
templateUrl: 'templates/bant-tab-matches-detail.html',
controller: 'MatchesDetailCtrl'
}
}
})
I have a button on a different view which on click calls a function in the controller as follows:
$scope.messageUser = function (postInfo) {
$state.go('tab.matches-detail', { matchId: var1, userId: var2, userName: var3 });
}
This redirects to the tab.matches-detail view as expected but a back button is not present. I would like the back button to redirect back to the parent view being tab.matches, or the view I originally redirected from. If I navigate from tab.matches to tab.matches-detail (when I have not redirected by $state.go) the back button is present. I however am going direct to tab.matches-detail when $state.go is called. As such I can no longer access tab.matches as if I click on another tab and then return to tab.matches it displays tab.matches-detail with no way to access the parent state of tab.matches. I can't figure out how to get the back button to display. I need this to be controlled from the controller rather than a href in the view as I need to call similar functionality from an Actionsheet where the logic is all controller side.
Apologies for the rather verbose explanation but I want to be clear on the issue.
Thanks in advance for your help.
Anthony
To resolve this issue I set the back button in the view as not visible by setting hide-back-button="true" in the <ion-view> tag, then added a button for the header as follows:
<ion-nav-buttons side="left" class="button-clear customButton">
<div class = "buttonMatchesInner" ng-click="matchesGoBack()">
<i class="ion-chevron-left matchLeftIcon"></i>
</div>
</ion-nav-buttons>
With the click event calling:
$scope.matchesGoBack = function() {
$state.go('tab.matches');
}
I need to hide dockbar for non logged in guests. I did that by creating custom theme that uses welcome-theme as a parent, and the following snippet:
#if($is_signed_in)
#dockbar()
#end
in theme's templates\portal_normal.vm.
This presents another problem - when page reorders to fit a mobile screen, menu collapses to a button in the dockbar which is hidden. I would love to have it collapse somewhere else, just that it isn't hidden - for example next to the small logo / site title, or as a first breadcrumbs item.
How to do it, or where to begin. I appreciate any help.
Menu collapses by default for phone and tablet viewports. You can create your own button to open/close collapsed menu in phone/tablet viewport. Check following simplified example:
Theme velocity template:
#if(!$is_signed_in)
<div id="mainNavigationToggle" class="btn btn-secondary">
<i class="icon-reorder"></i>
</div>
#end
Theme main.js:
AUI().ready(function (A) {
var navigationToggleBtn = A.one('#mainNavigationToggle'); // get our toggle button
var navigationUl = A.one(Liferay.Data.NAV_SELECTOR); // get default navigation ul element
if (navigationToggleBtn && navigationUl) { // do nothing when toggle button not present (user not signed in) or if navigation is not present
navigationToggleBtn.on( // otherwise assign simple function that'll toggle 'open' menu class on default navigation which will cause it to open, same for menu toggle button
'click',
function (event) {
navigationToggleBtn.toggleClass('open');
navigationUl.toggleClass('open');
}
);
}
}
);
Theme custom.css:
#mainNavigationToggle {
display: none; /* hide by default */
#include respond-to(phone, tablet) {
display: block; /* show only for phone and tablet viewports */
}
}