I'm using Ionic4, I have a page that has two ion-toolbar, the first contains the page title, while the second ( which is pretty long )contains some important data.
I want to fix only the first toolbar, and the second must scroll with the rest of the page.
Here's a screen of the page:
My Html code..
<ion-header>
<ion-toolbar class="header">
<ion-title class="page-title">
{{mail.subject}}
</ion-title>
</ion-toolbar>
<ion-toolbar class="mail-infos" >
<ion-grid>
<ion-row>
<ion-col> contentts
</coll>
</ion-row>
</ion-grid>
<ion-toolbar>
</ion-header>
<ion-content> content </ion-content>
Related
I am trying to create a contact list on Ionic 5, using angular, but it is not possible to access this style. I'm a beginner at IONIC, can you help me?
How to leave a rendered image at the beginning of the card, with a icon and header and a icon with subheader, as in the image below?
my image:
my code:
<ion-content padding>
<ion-card>
<ion-grid>
<ion-row>
<ion-col>
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="border-radius: 50%; width: 80%; height: 85%">
</ion-col>
<ion-col>
<ion-item>
<h2>Marty McFly</h2>
</ion-item>
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh</p>
</ion-card-content>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
Thanks =)
You could just use a list of ion-items. They provide a round avatar to start the item, followed with a label which you can modify to sample your desired outcome.
<ion-content>
<ion-list>
<ion-item *ngFor="your loop here">
<ion-avatar slot="start">
<img src="...">
</ion-avatar>
<ion-label>
<ion-grid>
<ion-row>
<ion-col size="12">
<!-- name -->
</ion-col>
</ion-row>
<ion-row>
<ion-col size="2">
<!-- icon -->
</ion-col>
<ion-col size="10">
<!-- calender -->
</ion-col>
</ion-row>
<ion-row>
<ion-col size="2">
<!-- icon -->
</ion-col>
<ion-col size="10">
<!-- time -->
</ion-col>
</ion-row>
</ion-grid>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
I need to put radio button options near each other:
<ion-content padding>
<ion-list radio-group>
<ion-list-header>
Auto Manufacturers
</ion-list-header>
<ion-item *ngFor="let entry of array">
<ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
<ion-label> {{entry}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
I tried to use flex but it didn't work:
display: flex
The current behavior is 2 options beneath each other. But how can I use flex to display them near each other?
Here is a stackblitz
You can also use grid system to achieve this:
<ion-content padding>
<ion-list radio-group>
<ion-list-header>
Auto Manufacturers
</ion-list-header>
<ion-row>
<ion-col *ngFor="let entry of array">
<ion-item >
<ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
<ion-label> {{entry}}</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-list>
</ion-content>
I need to show ion-button and ion-title same line in ion-navbar in ion-header. Below is my code.
<ion-header>
<ion-navbar>
<button ion-button icon-only>
<ion-icon name="arrow-back"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
How to show ion-button and ion-title inline in ion-navbar ?
Try this:
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only >
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title text-left>Home</ion-title>
</ion-navbar>
</ion-header>
It is working properly.
In the latest Ionic (v5), the button position has changed to "slot" as shown below:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>My Navigation Bar</ion-title>
</ion-toolbar>
</ion-header>
Additionally, there is a new ion-back-button which inserts a back button based on the history stack, etc.
Slot values are documented here: https://ionicframework.com/docs/api/buttons
Header documentation here: https://ionicframework.com/docs/api/header
you should use <ion-row> and <ion-col> labels. Use this:
<ion-header>
<ion-navbar>
<ion-row>
<ion-col col-5>
<ion-buttons left>
<button ion-button icon-only >
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
</ion-col>
<ion-col col-5>
<ion-title text-left>Home</ion-title>
</ion-col>
</ion-row>
</ion-navbar>
It is really important use that to do your app responsive.
I have created a simple chat form in Ionic.
Problem: Buttons are going out of screen.
It looks like this this -
My chat.html
<ion-header>
<ion-navbar>
<ion-title>communicationgiven</ion-title>
<button ion-button (click)="close()" style="margin-left: 90%;margin-top: -3%">Close</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<div>
<p *ngFor="let list of list; let i = index;">
<ion-item>
<!-- <p style="color: #1bb0f4;font-size: 20px;">Tagto {{list.TAG_TO}}</p> -->
<p style="color: #1bb0f4;"> {{list.TAG_FROM}}</p>
<p style="color: #d2dce1;"> {{list.TAG}}</p>
</ion-item>
</p>
</div>
</ion-list>
</ion-content>
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
<button ion-button type="submit" style="margin-left: 90%;margin-top: -5%;">Submit</button>
</form>
</ion-footer>
I want to know why my buttons are going out of the page; how can I make sure they stay inside the screen, irrespective of the screen size?
What is the best practice here? I am fairly new in CSS.
You have to use below code for left button
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Page Title
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openModal()">
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
For footer you can use ion-grid
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-grid>
<ion-row>
<ion-col col-9>
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
</ion-col>
<ion-col col-3>
<button ion-button type="submit">Submit</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-footer>
For more info please refer this
https://ionicframework.com/docs/api/components/toolbar/Navbar/
you had given style="margin-left: 90% that is margin from left side is 90% so obviously it will go out of screen, try to decrease the value.
It's hard to answer this one as I can't replicate the issue locally with what you've provided.
I'd start by reducing the margin-left: 90% on the button element, see how that goes.
In regard to best practices, an important one is to not use inline styles. That is putting styles in the style html attribute. Instead try using an external style sheet or at least an internal style sheet, see: https://www.w3schools.com/css/css_howto.asp
I am experiencing a problem showing a map in my page.
This is my code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Cerca
</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-segment [(ngModel)]="mySegment">
<ion-segment-button value="Mapa">
Mapa
</ion-segment-button>
<ion-segment-button value="Lista">
Lista
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="mySegment">
<div #map id="map" style="height:100%;" *ngSwitchCase="'Mapa'" (click)="openBestofferdetailPage(offer)">
</div>
<div *ngSwitchCase="'Lista'">
<button ion-item *ngFor="let offer of offersmodelArray" (click)="openBestofferdetailPage(offer)">
<ion-thumbnail item-left>
<img src="{{offer.imageoffer}}">
</ion-thumbnail>
<p style="font-size:50%;">
<ion-row>
<ion-col>
<span item-left>{{offer.cityprovider}}</span>
<span item-left>({{offer.distanceToProvider}} km)</span>
</ion-col>
<ion-col right text-right>
<s>
<span item-right>{{offer.oldprice}}</span>
</s>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<span item-left>{{offer.sold}}</span>
<span item-left>comprados</span>
</ion-col>
<ion-col right text-right>
<b><p style="font-size:70%;" style="color:green">
<span item-right>{{offer.newprice}}</span>
</p></b>
</ion-col>
</ion-row>
</p>
</button>
</div>
</div>
</ion-content>
The default option is "Mapa" however it doesn't show the map, I guess is an issue related to the position setup and the <ion-segment> but I would appreciate your help on understanding where I can make the change.
Just as a complementary information if I set the map outside the content the map is being showed without any problem
<ion-content padding>
<div #map id="map" style="height:100%;"></div>
</ion-content>
I saw some related question but without answer
Ionic 2, use google maps in ion-segments
Please your help