I'm trying to center (both horiz and vertical) and stack the 2 social buttons but it's not working. What am I doing wrong?
<ion-content padding>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-col>
<button ion-button icon-left outline color="fb" (click)="fbClicked($event)">
<ion-icon name="logo-facebook" color="#3B5998"></ion-icon>
CONNECT WITH FACEBOOK
</button>
</ion-col>
</ion-row>
<ion-row justify-content-center align-items-center>
<ion-col>
<button ion-button icon-left outline>
<ion-icon name="logo-google"></ion-icon>
CONNECT WITH GOOGLE
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
I am not fully aware of all ionic built in classes but you can use flexbox for this case and android and ios has a good support of it. I changed your code a bit and simplified it.
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
});
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Social Buttons</h1>
</ion-header-bar>
<ion-content class="Aligner">
<ion-grid>
<ion-row>
<div class = "col">
<button color="fb" (click)="fbClicked($event)">
<ion-icon name="logo-facebook" color="#3B5998"></ion-icon>
CONNECT WITH FACEBOOK
</button>
</div>
<div class = "col">
<button>
<ion-icon name="logo-google"></ion-icon>
CONNECT WITH GOOGLE
</button>
</div>
</ion-row>
</ion-grid>
</ion-content>
</body>
</html>
Related
I have the a problem when trying too render ionic content in my website , you can check the problem here to inspect my element and css :
https://elitestudents.link/html/
here is my html code
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css" />
</head>
<body>
<ion-app >
<ion-content>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">اسم الطالب</ion-label>
<ion-input placeholder="الاسم بالعربي" style="text-align:center ;"></ion-input>
</ion-item >
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">هاتف لي الامر</ion-label>
<ion-input type="number" placeholder="07****" style="text-align:center ;"></ion-input>
</ion-item>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">معرف التلكرام الخاص بالطالب</ion-label>
<ion-input placeholder="لا تنسة ال # بالداية" style="text-align:center ;"></ion-input>
</ion-item>
<ion-item style="margin : 20px; padding: 20px;">
<ion-label position="stacked" style="align-self:center ;">كود الدورة</ion-label>
<ion-input placeholder="" style="text-align:center ;"></ion-input>
</ion-item>
<ion-button style="--background: orange; border-radius: 50px ; text-align:center ;" > الانضمام للدورة
<ion-icon slot="start" name="school"></ion-icon>
</ion-button>
</ion-content>
</ion-app>
</body>
I want to make the icon goes between the header and content section
but its keep going UNDER the header section..
This is the result I get:
my html code
<ion-header >
<ion-toolbar class="header">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title class="app-title" text-center>My app</ion-title>
</ion-toolbar>
<ion-toolbar class="header">
<ion-row>
<ion-col text-center routerLink="/mails-to-sign">
<p class="stat-title">Courriers à signer</p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/action">
<p class="stat-title"> Actions à réaliser </p>
</ion-col>
<div class="verticalLine"></div>
<ion-col text-center routerLink="/refused-mails"></p>
<p class="stat-title">Courriers transmit</p>
</ion-col>
</ion-row>
</ion-toolbar>
<ion-content>
<ion-icon class="add-mail-btn" color="success" name="add-circle"></ion-icon>
</ion-content>
My css
.add-mail-btn{
font-size: 60px;
position: absolute;
top: -5%;
left: 79%;
}
Looks like you're looking for the ion-fab component:
<ion-content>
<!--
fab placed to the top and end and on the top edge
of the content overlapping header
-->
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button>
<ion-icon name="person"></ion-icon>
</ion-fab-button>
</ion-fab>
...
</ion-content>
Please notice that the position of the button is achieved by using the following properties: vertical="top" horizontal="end" edge
I want to make a common footer for all the pages , the footer have 5 buttons,
the first one is selected by default and this one or the page opened by the first button have three tabs, i made the three tabs and everything fine,but i don't know how to add the footer? should i add it on every single page? (there will be a lot of repetition) any idea ?
the ion-tabs it not appear on all pages as i want because i add on app.module.ts
tabsHideOnSubPages: true
<ion-tabs [selectedIndex]="mySelectedIndex"
name="mainTabs"
tabsPlacement="top"
tabsLayout="icon-hide"
tabsHighlight="true"
[ngClass]="showTabs? 'appear-tabs':'disappear-tabs'">
<ion-tab [root]="exploreRoot" tabTitle="A"></ion-tab>
<ion-tab [root]="spotlightRoot" tabTitle="B"></ion-tab>
<ion-tab [root]="webinarsRoot" tabTitle="C"></ion-tab>
</ion-tabs>
footer:
<ion-footer>
<ion-toolbar>
<ion-buttons>
<!--Main-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-home"></ion-icon>
<label class="title-icon-footer">AAA</label>
</div>
</button>
<!--my Programs-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="ios-play"></ion-icon>
<label class="title-icon-footer">BBB</label>
</div>
</button>
<!--my webinars-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-desktop"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my notification-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-notifications"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my account-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-person"></ion-icon>
<label class="title-icon-footer">DDD</label>
</div>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
I wanted to do the same and ended up not using tabs and created a footer component that I included on every page. I passed the navController from the page to the footer so the footer could navigate to pages.
On every page .html
<ion-footer>
<my-footer [navController]="navController"></my-footer>
</ion-footer>
Footer component .html
<ion-grid no-padding>
<ion-row align-items-center>
<ion-col col-6 text-center>
<button ion-button icon-only (click)="gotoPage('HomePage')">
<ion-icon name="md-apps"></ion-icon>
<span>Home</span>
</button>
</ion-col>
<ion-col text-center>
<button ion-button icon-only (click)="gotoPage('ContactPage')">
<ion-icon name="md-list-box"></ion-icon>
<span>Contact</span>
</button>
</ion-col>
</ion-row>
</ion-grid>
Footer component .ts
import { Component, Input } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'mwc-footer',
templateUrl: 'mwc-footer.html'
})
export class MwcFooterComponent {
#Input('navController') navController;
constructor() { }
public gotoPage(page: string): void {
this.navController.setRoot(page);
}
}
I'm trying to use ionic's infinite scroll. However, no matter what I do I can't get this working. Also, there example makes no sense to me what so ever.
I have this page I'm using to import messages:
<astoot-layout [pageName]="pageName" [basePage]="this">
<ion-content padding-horizontal padding class="messages-page-content">
<!--<ion-scroll scrollY="true" class="messages">-->
<ion-list>
<ion-item *ngFor="let message of messages">
<!--<div *ngFor="let message of messages" class="day-wrapper">-->
<div [class]="'message message-' + getOwnerClassPrefix(message.senderUserId)">
<div class="message-content message-content-text">{{message.messageText}}</div>
<span class="message-timestamp">{{ getCreated(message.created) }}</span>
</div>
<!--</div>-->
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullPage($event)">
<ion-infinite-scroll-content>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<!--</ion-scroll>-->
</ion-content>
<ion-footer>
<ion-toolbar color="whatsapp" class="messages-page-footer" position="bottom">
<ion-input [(ngModel)]="messageText" class="message-editor" placeholder="Type a message"></ion-input>
<ion-buttons end>
<button ion-button icon-only *ngIf="messageText" class="message-editor-button" (click)="sendTextMessage()">
<ion-icon name="send"></ion-icon>
</button>
<button ion-button icon-only *ngIf="!messageText" class="message-editor-button">
<ion-icon name="mic"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</astoot-layout>
This is my pullPage Method which is never called:
pullPage(infiniteScroll: any) {
//TODO Get nextPage
setTimeout(() => {
this.baseProvider.getList(this.filterByConversationId).subscribe(entities => {
this.messages.concat(entities);
infiniteScroll.complete();
});
}, 500);
}
just incase its needed here is my layout component:
<ion-header>
<ion-navbar align-title="center">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> {{pageName}} </ion-title>
<ion-buttons end>
<button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
<ion-icon name="create"></ion-icon>
Edit
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
<ion-icon name="save"></ion-icon>
Save
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
<ion-icon name="save"></ion-icon>
Cancel
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ng-content>
</ng-content>
I'm generally confused on how ion-infinite-scroll even works how does it know when to signal, is it just based on the closest list above it?
How can I get the infinite scroll event to fired?
For anyone who is encountering something similar, the problem is an open issue with ionic caused by the nested ion-content, Luckily in my case I could remove it
My messages page now call the component with out wrapping the content:
<astoot-layout [pageName]="pageName" [basePage]="this"></astoot-layout>
My layout page now looks like this:
<ion-header>
<ion-navbar align-title="center">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> {{pageName}} </ion-title>
<ion-buttons end>
<button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
<ion-icon name="create"></ion-icon>
Edit
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
<ion-icon name="save"></ion-icon>
Save
</button>
<button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
<ion-icon name="save"></ion-icon>
Cancel
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Ionic 2 input elements not scrolling to top when keyboard is shown. I have tried everything that i could find on google. making sure keyboard disable scroll is not true. But still couldn't figure it out what makes the scroll not working.
Any advice would be helpful. Thank you.
Code:
<ion-header>
<ion-navbar color="header">
<ion-title>Billing Info</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list style="padding: 10px 15% 10px 15%">
<ion-item *ngFor="let item of cart.Food">
{{item.Food}}
<div item-right>₹ {{item.Qty*item.Price}}</div>
</ion-item>
</ion-list>
<ion-item (click)="toggleGroup(i)" style="padding: 10px 15% 10px 15%; font-size: large">
Net Total
<div item-right>₹ 150
<ion-icon color="success" [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
</div>
</ion-item>
<ion-list *ngIf="isGroupShown(i)" style="padding: 10px 15% 10px 15%" [ngClass]="{active: isGroupShown(i)}">
<ion-item>
Bill Amount
<div item-right>₹ 150</div>
</ion-item>
...
</ion-list>
<ion-item style="padding: 10px 15% 10px 15%">
<ion-label>Discounts</ion-label>
<ion-checkbox item-right color="secondary" [(ngModel)]="discount" checked="false"></ion-checkbox>
</ion-item>
<ion-grid style="padding: 10px 15% 10px 15%; background-color: #f0e68c" radio-group [(ngModel)]="type">
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Percentage</ion-label>
<ion-radio value="percentage" checked item-right></ion-radio>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Amount</ion-label>
<ion-radio value="amount"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-list>
<ion-item>
<ion-label floating>Unit</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Reason</ion-label>
<ion-textarea rows="5"></ion-textarea>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<button ion-button>Apply</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer text-center>
<ion-toolbar position="bottom">
<button ion-button color="cart" round large outline>BILL</button>
</ion-toolbar>
</ion-footer>
Screenshot:
There is a topic for this kind of issue on ionic forum. Did You read it?
There are workarounds like those:
Using a regular <input type="text"> instead of <ion-input type="text">
Using some custom directive to make element "attached" to keyboard: https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754