I have a simple application consists of a textbox and a footer, the problem i faced that when i write in the textbox , the footer moves up like this
What i want is to make the footer fixed at the bottom , and the keyboard appears above the footer .
Here's the code
<body ng-app="starter">
<ion-pane>
<ion-content>
<input type="text" />
</ion-content>
<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>
</div>
</ion-pane>
</body>
After 3 days i found the solution ,
YourProject\platforms\android\AndroidManifest
Set the android:windowSoftInputMode to adjustPan
you're not implementing it right
use ion-footer-bar directive
<ion-content class="has-footer">
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
http://ionicframework.com/docs/api/directive/ionFooterBar/
Related
I have an ag-grid in my html, and I want to put a button so that when I press that same ag-grid is shown but in a modal to be able to see it in more detail, but it is in the same html, and the ag-grid is exactly the same.
It can be done so that the same ag-grid is seen in the same html and controller.
Since he does not paint me anything but one.
HTML:
<div ag-grid="agGridBusqueda" class="ag-enel h113"></div>
.....
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div ag-grid="agGridBusqueda" class="ag-enel h113"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
No, it is not possible to render the same grid two times, in a modal and in a background. You would need to make a separate grid and update the values manually.
I also think this would be both terrible for the performance and the usability. The user would see grid-lines in the background when opening a modal (from the original grid) which would change as he modifies the modal-grid; I think this is disturbing. And you would have 2x the amount of rendered rows and input listeners on your screen.
I think the cleaner solution would be to just use one instance of ag-grid and (on button-click) assign class="modal-body" to it, making the container element float with an extended width and dimmed background.
I want the ion-header with fixed position. When keyboard appears it also scroll up with the rest of the screen in iOS. How to make ion-header remain stick to the top while other part of a screen scroll up?
<ion-header no-border>
<button class="left-button" (click)="delete()" >
Delete
</button>
<button class="right-button" (click)="save()" >
Save
</button>
</ion-header>
<ion-content id="home" class="background-Image" no-bounce>
<form [formGroup]="signup" novalidate>
<!-- User email -->
<div class="label">Wnat is your email?</div>
<div class="row">
<input class="input" autocorrect="off" type="email" placeholder="" formControlName="email" (input)="onEmailChange()" (blur)="onEmailSubmitted()" (keyup.enter)="hideKeyboard()">
<div class="validation-image">
<img [src]=validationImageEmail [hidden]=!validationImageEmail />
</div>
</div>
<hr class="underline">
</form>
</ion-content>
I think that the case is that your header lacks of a navbar or toolbar. By my experience both have the sabe result, but as the documentation says:
A Toolbar is a generic bar that is positioned above or below content. Unlike a Navbar, a toolbar can be used as a subheader. When toolbars are placed within an ion-header or ion-footer, the toolbars stay fixed in their respective location. When placed within ion-content, toolbars will scroll with the content.
So update your code like this:
<ion-header no-border>
<ion-toolbar>
<button class="left-button" (click)="delete()" >
Delete
</button>
<button class="right-button" (click)="save()" >
Save
</button>
</ion-toolbar>
</ion-header>
Hope this helps.
I'm creating an app using Ionic 1.3.2, and I have one step when user choose your login type, from facebook or from app, after the user make your login it will redirect to other step when has a <ion-side-menus> and the user can use the app. The problem is I created the first step (choose login) with <ion-nav-bar> and in second step (side-menus) also has <ion-nav-bar> on content of <ion-side-menus> and the header of first step seems override the header of second step bugging the layout, I want to use the same header on both steps.
My question is, how could I use only one header, in that case header created on first step, and the second step use this header too ?
My scene is like below.
index.html (first step)
<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">
<!-- The nav bar that will be updated as we navigate-->
<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view></ion-nav-view>
</body>
main.html (first step, where user choose your login type)
<ion-view view-title="MeuPedido" align-title="center">
<ion-content>
<div class="principal">
<a class="button button-block button-positive" ng-click="fbLogin();">Login com Facebook</a>
<button class="button button-block button-energized" ng-click="goTo('login');">
Entrar
</button>
<button class="button button-block button-energized" ng-click="goTo('addUsuario');">
Cadastrar
</button>
</div>
</ion-content>
</ion-view>
sidemenu.html (second step, after user make his login)
<ion-side-menus ng-controller='CtrlSideMenu' data-ng-init="loadImage();">
<!-- Center content -->
<ion-side-menu-content>
<!--app has header on index.html -->
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left" class="has-header">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="tabsContent"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar>
<div>
<div class="row">
<div class="col col-90 text-center">
<img ng-src="{{imageURL}}" class="round_image">
</div>
</div>
<div class="row">
<div class="col col-90 text-center customTitle">{{nome}}</div>
</div>
</div>
</ion-header-bar>
<ion-content style="margin-top:200px;">
<ion-list>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<h6>Desenvolvido por Iguana Sistemas</h6>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
here image of first step, look at in this point has header
here image of second step, note that header of first step is overriding header inside ion-side-menus and bugging the layout.
I don't really get what you want to achieve, but side menu is one thing (it controls the view that appears when you open the side menu)and the the main view is another - is the view that user will see and from here you can open side-menu. you can have different nav bars for this 2 views. but from your code it looks like you have 1 main view that logs in the user and then changes itself to display the feed and a side-menu.
you multiple options: 1. make the title and color of the nav bar variable and change them with angular. 2. create another view for second step and override the nav bar.
You should have a structure something like this: -> main view(login) ->second view(feed) that also has a side menu
I'm using Iconic 1 and I want to center the "MyAccount" in the header. I've had a look at the docs and tried the code but it places the content in the content pane.
This is the code I've got at the moment that displays the "MyAccount" at top:
<ion-view view-title="MyAccount">
<ion-content>
<h1>My Account</h1>
</ion-content>
</ion-view>
I'm thinking I'll need to add the <ion-header-bar></ion-header-bar> directive somewhere. I tried adding it but it didn't have the desired effect.
Can anyone suggest how to do this?
To use the dynamic header bar behavior in Ionic-Angular, use the <ion-header-bar> directive:
<ion-header-bar
title="MyAccount"
left-buttons="leftButtons"
right-buttons="rightButtons"
type="bar-positive"
align-title="center">
</ion-header-bar>
Source: Headers
Example:
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">MyAccount</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content class="has-header">
Some content!
</ion-content>
Below is the template code to a page in my app. You can see that I am using the ion-nav-bar. I would like to disable the ion-nav-bar on the login screen and to not have a back button to go back to the login screen.
The best solution I can come up with is to remove <ion-nav-bar> from the login page and add an ng-show directive to <ion-nav-back-button> that tests if the previous page is login and hides the tag in that case.
Is there any better design pattern for this?
<ion-view view-title="Sales">
<ion-pane>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-content class="padding">
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
</ionic-datepicker>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Amount" ng-model="data.amount">
</label>
</div>
<button class="button button-block button-stable" ng-click="enter()">Save</button>
</ion-content>
</ion-nav-bar>
</ion-pane>
</ion-view>
To your ion-view, you need to add the hide-nav-bar directive and set it to true to hide it on this page.
Like so
<ion-view hide-nav-bar="true">
This will hide the whole nav-bar when you enter the view
For hiding back button just add this tag to your view just like this
<ion-view title="Login" hide-back-button="true">