Initially i have used in ionic 1 to use the footer after the <ion-content> and befoew .But in new ionic 2 i dont see any <ion-view> is availble.
Because my requirement is after <ion-content> i need to have some two button at bottom of screen. It might be a fotter. So how can i use thos below ionic 1 code to make the footer button in ionic 2 ??
<div class="bar bar-footer bar-clear footer-button btnpadding" style="margin-bottom: 6px;padding-right: 6px; height: 8%;padding-top: 3px;">
<div class="button-bar font-color">
<button class="button button-outline" style="font-size: 14px;font-weight: bold;border: none;color: #696969;background-color: #fff" ng-click="LoginButtontap()">LOG IN</button>
<button class="button button-dark button-outline" style="margin-bottom: 5px;
margin-right: 5px;font-size: 14px;font-weight: bold;border: none;color: #fff">SIGN UP</button>
</div>
</div>
In Ionic 2 the basic page template follow this structure:
<ion-header>
<!-- PAGE HEADER CODE HERE -->
</ion-header>
<ion-content>
<!-- PAGE CONTENT CODE HERE -->
</ion-content>
<ion-footer>
<!-- FOOTER CODE HERE -->
<ion-button outline style="font-size: 14px;font-weight: bold;border: none;color: #696969;background-color: #fff" (click)="LoginButtontap()">LOG IN</ion-button>
<ion-button outline color="dark" style="margin-bottom: 5px;
margin-right: 5px;font-size: 14px;font-weight: bold;border: none;color: #fff">SIGN UP</ion-button>
</ion-footer>
so all you have to do is to put your buttons inside the <ion-footer> element. See also the official docs
Related
Im trying to hide specific div (empty state) when i add some item from add button, any ideas how can i do that easily?
Best Regards, Will.
page.html
<ion-content>
<!-- DIV ABOVE -->
<div class="center-div">
<img src="assets/imgs/noItem.svg" />
<div class="center">
<h1>Empty List</h1>
</div>
</div>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-list>
<button *ngFor="let item of items" ion-item (click)="goToItemDetail(crop)">
...
</ion-list>
<ion-fab right bottom>
<button ion-fab class="button-fab" (click)="addItem()">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
Yes, you can hide div with the help of *ngIf="condition"
<div class="center" *ngIf="items">
<h1>Empty List</h1>
</div>
or you can also check boolean varible on button like
// isVisible: boolean
addItem() {
this.isVisible = false;
}
<div class="center" *ngIf="!isVisible">
<h1>Empty List</h1>
</div>
I want to fill the left side and the right side of an ion-list with different Weatherdata of different countries. I hope someone can help me. I have been looking for a solution for hours.
CLICK HERE FOR THE GUI OF THE APPLICATION
THIS IS THE GUI OF THE GUI
This is how my code looks like for the selection of the ion-list:
<ion-view title="Termine" hide-nav-bar="true" id="page3" style="background-color: rgb(220, 220, 224);" >
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-plus-round"></button>
</ion-nav-buttons>
<ion-content padding="true" class="manual-ios-statusbar-padding">
<div ng-controller="WeatherBerlinCtrl">
<!-- WEATHER SECTION -->
<ion-list id="termine-list">
<ion-item class="item-thumbnail-left" id="termine-list-item46"style="">
<img src={{vWeatherLinkIcon}}>
<h2 style="text-align: left; width:49%; display: inline-block; font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2>
<!-- <img style="float: right;" src={{vWeatherLinkIcon}}> -->
<h2>Max: {{vWeatherMaxDegrees}} °C</h2>
<h2>Min: {{vWeatherMinDegrees}} °C</h2>
<!-- <div class="item-thumbnail-right">
<img style="float: right;" src={{vWeatherLinkIcon}}>
<div ng-controller="WeatherKabulCtrl">
<h2 style="text-align: right; width:50%; display: inline-block; font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2>
</div> -->
</ion-list>
<div class="spacer" style="width: 748px; height: 15px;"></div>`
What about using an ion-grid inside your ion-list ?
<ion-grid>
<ion-row>
<ion-col>
left
</ion-col>
<ion-col>
right
</ion-col>
</ion-row>
</ion-grid>
ionic doc
In ionic how can i put a button at some percentage from the bottom ion-content?
I've tried
<ion-view>
<ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-content>
</ion-view>
css:
.button-bottom{
position: absolute;
bottom: 30%;
}
but the button now not take the full width.
Try giving your container an explicit width:
.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}
Add "full" variable in your button
Ex:- button class="button button-block button-energized" full >Button</button>
For more reference see Ionic Documentation on UI Components in the link below.
Ionic Full Button
Just move the button to outside of the ion-content.
Example:
Ionic 3:
<ion-view>
<ion-content>
</ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-view>
Ionic 4:
<ion-header>
<ion-toolbar>
<ion-title>Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p> your content </p>
</ion-content>
<ion-row>
<ion-col>
<ion-button>
Button Bottom (Not fixed on scroll)
</ion-button>
</ion-col>
</ion-row>
In My ionic I have bottom tabs as well as top tabs after the header bar. However I see the output differently in Google Chrome and the Ionic Iphone App.
Attaching screenshots of how it looks on Google Chrome (as intended) and on the Inoic Phone app
On Google Chrome
On Ionic Iphone App
Here is the 1st Tab's HTML Code:
<ion-view view-title="TAB 1">
<ion-content >
<ion-tabs class="tabs-top tabs-icon-top has-header">
<ion-tab title="Tab1" icon-on="ion-heart" icon-off="ion-heart">
<!-- Tab 1 content -->
<div class="padding" >
<h2 class="title ">Lorem ipsum dolor sit ametr adipiscing elit</h2>
<p></p>
<ion-scroll direction="x" class="item " style="padding:5px">
<button data-ng-repeat="item in recent|filter:{tag:'!!'}" class="horizontaList button" ng-click="addFromRecent(item.id, 'tag');">
{{item.tag}}
</button>
</ion-scroll>
Here is index.html code:
<body data-ng-app="starter">
<ion-side-menus>
<ion-pane ion-side-menu-content="">
<ion-nav-bar class="bar">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header "></ion-header-bar>
<ion-content has-header="true">
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-ios-home-outline"></i>
Home
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-log-out"></i>
Log out
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Thanks in advance for your help!
I think your has-header class is wrong on <ion-tabs>. Quote from the ionic blog:
The beta has also removed the requirement for the developer to
manually tell the content to reposition itself if there is a header,
footer, or tabbar present. Resultantly, the has-header, has-footer,
and has-tabs attributes have been removed. Ionic now will
automatically reposition and resize the content depending on what
surrounding widgets are present. If any old alpha code references
these attributes or classnames they can be safely removed since
they’re no longer being used by the framework.
In a view with header and subheader, subheader content overlaps the contents of the view.
Header in slide menu
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-hide="$exposeAside.active"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
Subheader in a view
<ion-header-bar align-title="center" class="bar bar-subheader custom bar-energized" ng-if="datos.subTitulo">
<div class="buttons">
<a class="ion-chevron-left" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a>
</div>
<h2 class="subtitle">{{datos.subTitulo}}</h2>
<div class="buttons">
<a class="ion-chevron-right" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a>
</div>
</ion-header-bar>
Div buttons in subheader overlapping content, h2 show 100%.
Something is missing in this code? Thanks
[EDIT]
Rewrote the code to suit my needs: subheader smaller than the header with two links in the corners and a title.
<ion-header-bar align-title="center" class="bar-subheader subheader_custom bar-energized">
<div class="button button-clear">
<a class="icon ion-ios-arrow-back blanco" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a>
</div>
<div class="h2 title title_custom">{{datos.subTitulo}}</div>
<div class="button button-clear">
<a class="icon ion-ios-arrow-forward blanco" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a>
</div>
</ion-header-bar>
Add this css:
.has-subheader {
top: 70px;
}
.bar-subheader.subheader_custom {
display: block;
height: 26px;
top: 44px;
}
.title.title_custom {
font-size: 16px;
font-weight: 300;
height: 20px;
left: 0;
line-height: 20px;
margin: 2px 10px 2px 10px;
min-width: 24px;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
text-overflow: ellipsis;
top: 0;
white-space: nowrap;
z-index: 0;
}
Even buttons are not in line with the subheader title. Any ideas?
New status:
Make sure that the content view knows it needs to leave space for the subheaders by adding the CSS class has-subheader:
<ion-content class="has-header has-subheader">
</ion-content>
See http://ionicframework.com/docs/components/#subheader
If you face this issue in Android, then use the following
.platform-android .bar-subheader {
top: 93px;
}
https://forum.ionicframework.com/t/sub-header-not-showing-on-android-with-tabs/15341/18
You can easily change the height of the subheader, footer, and subfooter if you are using SASS with Ionic. If you want a 70px tall subheader simply add $bar-subheader-height: 70px; to your ionic.app.scss file. Your scss file should look something similar to:
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
$bar-subheader-height: 70px;
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
Check out the www/lib/ionic/scss/_variables.scss file for some of the other things you can change easily.
Here are instructions for setting up sass with ionic and here is a quick tutorial.
You can add has-header or has-subheader class to your main content in ion-content directive.
Here's my code:
<ion-view view-title="View Title">
<ion-content>
<div class="bar bar-header">
<h2 class="title">Sub Header</h2>
</div>
<div class="list has-header">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios-telephone-outline"></i>
</a>
</div>
</ion-content>
</ion-view>
<div class="list has-header"> I add the has-header class to my list to avoid subheader overlapping