I need make something like this example of boostrap grid system
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Please help me!!
Use wrap in ion-row
<ion-grid>
<ion-row wrap>
<ion-col col-12 col-md-6 col-lg-3>
</ion-col>
</ion-row>
</ion-grid>
Related
I want to scroll my ion-card component horizontally but it's not working that way. I've tried every resource on the internet but it's not scrolling horizontally.
Here is my code.
<ion-scroll scrollX="true" style="width:100% ; height:400px">
<ion-card nowrap *ngFor="let id of mydata" >
<img src="assets/imgs/arpit.jpg"/>
<ion-card-content>
<ion-card-title>
{{id.name}}
</ion-card-title>
<p>
{{id.regular_price}}
</p>
</ion-card-content>
</ion-card>
</ion-scroll>
The output I am getting is like the image below.
Try adding this styles is easy to do link
How does one display an ion-searchbar and an ion-segment inline in the same ion-toolbar? I'm using Ionic 3.
(in case you're curious, this is landscape-mode-only thing because in landscape mode vertical space is at a premium).
I'm (mostly) able to get this to work with ion-col, as seen below. Everything looks good in Chrome via Ionic Serve. But when running on a real device, the ion-segment gets pushed down and doesn't look right.
Example code below:
<ion-toolbar color="primary">
<ion-row>
<ion-col no-padding>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-toolbar>
How it looks in Chrome via Ionic Serve when spoofing iPhone mode
How it looks on a real iOS device:
What works:
I am able to get buttons to align to the end using ion-buttons end. However, when I wrap the ion-segment inside an ion-buttons, the segment doesn't appear at all. When I try applying the end attribute to the ion-segment, the segment overlays the search bar.
<ion-toolbar color="primary">
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
<ion-buttons end>
<button ion-button clear>
Test Button
</button>
</ion-buttons>
</ion-toolbar>
Is there a way to reliably display an ion-segment inline with other content inside an ion-toolbar? Thanks!
Try using align-items-center and col-6 like:
<ion-toolbar color="primary">
<ion-grid>
<ion-row align-items-center>
<ion-col no-padding col-6>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding col-6>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
documentation: https://ionicframework.com/docs/api/components/grid/Grid/
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/
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>
I'm building an Ionic 2 app that has a <ion-list> with <ion-item>s with (click) events. On loading the page with the <ion-list> it takes a few seconds before the <ion-item> click events become active and tappable. Tapping the items has no effect until a couple of seconds after the page has loaded.
I have only a few items in the list, and have tried with the virtualScroll list but to no effect.
What could be the cause of this?
I've figured out a work around for this unresponsiveness. Instead of using an ion-item use a <div> tag with tappable and ion-item attributes set.
The code below shows the fix in place
<ion-list [virtualScroll]="news">
<div tappable ion-item *virtualItem="let n" text-wrap (click)="openNews(n)">
<ion-row>
<ion-col width-20>
<img *ngIf="n.thumbnail" [src]="n.thumbnail">
</ion-col>
<ion-col width-80 text-wrap>
<h2>{{n.post_title}}</h2>
<p [innerHTML]="n.post_excerpt"></p>
</ion-col>
</ion-row>
</div>
</ion-list>