I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
Since the beta 14 of Ionic (http://blog.ionic.io/the-final-beta/), there are some config variables that now default to their platform values, which means that they will try to behave according to the platform that they are built on.
In the case of tabs, for iOS the default is to display on bottom, and Android on top.
You can easily "hard set" the location for all platforms by setting the tabs.position function in the $ionicConfigProvider, inside your config function like this:
MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
You can check documentation here
To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
Hope this will help.
Update for Ionic 2 (cleaner/improved syntax):
In app.js:
#App({
...
config: {
tabbarPlacement: 'bottom',
}
})
See Configs
Placing it in your app.js does the work.
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom.
For example, In the case of tabs, for iOS the default is to display on bottom, and Android on top.
Note1 : It should be noted that when a platform is not iOS or Android, then it’ll default to iOS
Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs
In side the app.js file you will need to inject the $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘bottom’)
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); //top
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.
.
.
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
How to place ionic tabs at the bottom of the screen in Ionic 2
For the current version ionic 2.0.0-beta.10.
In app.ts:
ionicBootstrap(MyApp, [], {
tabbarPlacement: "bottom"
});
See Config
For the soon to be released ionic 2.0.0-beta.11
In app.ts:
ionicBootstrap(MyApp, [], {
tabsPlacement: "bottom"
});
Config
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
Update for Ionic 2, and Ionic 3+:
You have 2 methods to change tab bar position:
Method 1: Use tabsPlacement propertive of <ion-tabs>
<ion-tabs tabsPlacement='bottom' >
<ion-tab [root]="rootTab" tabTitle="Home"></ion-tab>
</ion-tabs>
Method 2: Change config in app.module.ts
#NgModule({
imports: [
IonicModule.forRoot(MyApp, {
tabsPlacement : 'bottom'
})
]
})
See the docs
Try This
<ion-footer><ion-tabs> <ion-tab tabTitle="Return"></ion-tab> </ion-tabs></ion-footer>
Related
I'm having the following issue. I created an ionic projekt and generated a Homepage and a Register page.
When I try to do the navigation from home to register, and when I click on the register button it brings me back to homepage, instead of going to register page. I don't know what I'm doing wrong, I read bassicaly everything I found, and it seems that I am doing everything correctly. I also tried with a href, but I still have the same problem.
Here is the button that i generated in my Homepage html:
<ion-button (click)="register()">Register</ion-button>
Here is the Funktion in ts-file:
register() {
this.navctrl.navigateForward(['register']);
}
And here is the auto generated path in the routing page:
{ path: 'register', loadChildren: './register/.module#RegisterPageModule' },
Here is the syntax :
import { Router } from '#angular/router';
...
constructor(private router: Router){}
register() {
this.router.navigate(['/register']);
}
Here you go.
Helo
I'm using Viewer Example form here: https://forge.autodesk.com/en/docs/viewer/v5/tutorials/basic-viewer/
(Step 1)
and now I need:
1. add custom menu on right click
2. get info's for clicked object, like Area, Volume, Length (if 3D) or length if 2D.
How to do that, please?
I try to copy whole "class MyContextMenu extends ... " code from
https://forge.autodesk.com/blog/customize-viewer-context-menu
but it does not worked.
Thank you.
Here's a simple example of adding custom menu items to the context menu: http://jsfiddle.net/s47vy5u3/2. You'll just need to include your Forge app's access token and some viewable URN. The menu customization code itself looks like this:
function customizeMenu() {
const viewer = NOP_VIEWER;
viewer.registerContextMenuCallback('MyCustomMenuItems', function(menu, status) {
menu.push({
title: 'My custom menu item',
target: () => {
// Add your menu item's code here
}
});
});
}
I'm trying to use https://github.com/mapsplugin/cordova-plugin-googlemaps in framework7 project
but I'm facing a problem
as i navigate to the map page The image is loaded but wasn't displayed
I think the issue is z-index
I tried that solution
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028
but doesn't work
this is the page before map page
the red div is the place where image should display
after functions run i see that instead of map
I use this code to navigate to the map page
success: function (response) {
var responseObj = JSON.parse(response)
console.log(responseObj);
this.$root.navigate("/theMapPage/")
}
I found the solution
as I posted in comment that the plugin make the map behind the application
so I hide all pages and show the current page only
map.one(plugin.google.maps.event.MAP_READY, function () {
$$('.page').hide()
$$('.page.page-current').show()
map.clear();
map.getMyLocation(onSuccess, onError);
});
at end just show all pages again
pageAfterOut: function () {
// page has left the view
$$('.page').show()
}
I just create the ionic project and I'm trying to make the sign in and sign up page and I just implement the HTML and CSS. but the problem is I can't change position between controllers.
The URL of controller is changes but the page is not changed. I was trying to import the correct module but I can't find the method.
Make sure in app.js, your templateURL , url is properly defined.
Most of the time it might be your 'URL' problem.
If you navigated from 'main', your next url should be : /main/success or something like that.
.state('tab.main', {
cache: false, //if you want to disable cache in ionic
url: '/main',
views: {
'tab-cases': {
templateUrl: 'templates/tab-main.html',
controller: 'MainCtrl'
}
}
})
I am using ngDialog dialog box for my mean.js application with the following call :
ngDialog.open({
template: 'modules/users/views/userDetails/dialog.client.view.html',
scope: $scope,
closeByDocument :false
});
Now, the dialog is opening fine and all the elements in it are also visible.
But I am not able to perform any any action on them.i.e., click a button or type in a text field. It feels like the whole dialog box is out of focus.
What is it that I am doing wrong here?
Note : Angular Animate might be disabled in my application by the following code :
$timeout(function () {
return $animate.enabled(false, angular.element(".carousel"));
});
But, the above code is in another controller.
Could this be the reason for the failure?
I solved the problem by changing the css a bit:
.ngdialog-overlay {
z-index: -1;
}