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>
Related
I've create a side menu.
and button inside it
<ion-content style="background-image: url(assets/imgs/background.jpg)" >
<div id="sideBody">
<ion-list>
<button menuClose ion-item *ngFor="let p of Func.getPages()" (click)="openPage(p, p.title)">
{{p.title}}
</button>
</ion-list>
</div>
</ion-content>
</ion-menu>
how to make underline inside menu not showing and how change color text menu?
<ion-list no-lines>
<button menuClose ion-item *ngFor="let p of Func.getPages()" (click)="openPage(p, p.title)">
{{p.title}}
</button>
</ion-list>
Simply by putting no-lines property in like above i had edited your code.
The google maps is displayed when the page is loaded.
But when the ion-segment is toggled , the maps is not displayed.
Below is my ionic 2 code:
<ion-header>
<ion-toolbar no-border-top>
<ion-segment [(ngModel)]="social" (ionChange)="segementChangeAction()">
<ion-segment-button value="activity">
Map
</ion-segment-button>
<ion-segment-button value="messages">
Messages
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content no-bounce>
<div [ngSwitch]="social">
<div *ngSwitchCase="'activity'">
<div #map id="map"></div>
</div>
<div *ngSwitchCase="'messages'">
Some text.....
</div>
</div>
</ion-content>
That's because ngSwitchCase removes the map's div from the DOM when ion-segment is toggled. Do this:
<div [ngSwitch]="social">
<div [style.display]="social === 'activity' ? 'block' : 'none'">
<div #map id="map"></div>
</div>
<div *ngSwitchCase="'messages'">
Some text.....
</div>
</div>
In order to make it work in Ionic 3 the accepted answer i´ve to make a little adjustment adding height: 100% to the container:
<div [ngSwitch]="social">
<div [style.display]="social === 'activity' ? 'block' : 'none'" style="height: 100%">
<div #map id="map"></div>
</div>
<div *ngSwitchCase="'messages'">
Some text.....
</div>
I am trying to get page containing a slider in the middle and a button in the bottom as shown in this picture:
So, I chose to use the Ionic grid since I thought it will be fast to do it. I wrote thee following code:
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable bar-positive">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content scroll="false">
<div class="row row-center">
<ion-slide-box on-slide-changed="slideHasChanged($index)" class="col col-80 col-offset-10">
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
<ion-slide>...</ion-slide>
</ion-slide-box>
</div>
<div class="row row-bottom">
<button class="button button-full button-positive button-large button-skip">Click</button>
</div>
</ion-content>
</ion-pane>
Unfortunately, I got this result:
How can I fix it to get the view in the first picture ?
I've been working on a list with scrollable content, but after several tests I found that the scollbar is considering only the image but not the wrapped text for item size. This causes truncating content at the bottom of the page.
Here's my code:
<ion-content ng-controller="categoriesCtrl" ng-switch on="categories.length > 0" has-bouncing="false">
<ion-refresher on-refresh="updateCategories()">
</ion-refresher>
<div ng-switch-when="true">
<ion-list type="card">
<a class="item item-thumbnail-right item-text-wrap" href="#" ng-repeat="category in categories">
<img ng-src="{{category.photo}}" />
<h2>{{category.name}}</h2>
<p class="item-text-wrap">{{category.description}}</p>
</a>
</ion-list>
</div>
</ion-content>
this is what I got, cannot scroll any further
Solutions?
It appears you're using a combination of the <ion-list> directive with the list CSS elements. Try using the <ion-list> with <ion-item> directive.
<ion-list>
<ion-item class="item-text-wrap item-thumbnail-right">
<img ng-src="{{category.photo}}" />
<h2>Name</h2>
<p>{{description}}</p>
</ion-item>
<ion-item class="item-text-wrap item-thumbnail-right">
<img ng-src="{{category.photo}}" />
<h2>Name</h2>
<p>{{description}}</p>
</ion-item>
</ion-list>
Here's the working demo.
I have been trying making ion-tabs fixed inside ion-content but it hardly seems posssible. So is there any way of making tabs fixed inside a scollable content in ionic?
$( "ion-content" ).scroll(function() {
var scrollWidth = $(".main-content").height()-$(".header-bar").height();
if (parseInt($(this).scrollTop()) > scrollWidth ) {
$("#fixedAboutTabs").addClass("fixed");
});
}
else {
$("#fixedAboutTabs").removeClass("fixed");
});
.fixed{
left: 0;
top:44px;
position: fixed;
z-index:100;
width: 100%;
}
<ion-view>
<div class="header-bar">
<button class="button button-clear arrow-btn" ng-click="goBack()"> <img src="img/arrow.png" class="arrow-img"> </button>
<h1 class="title">{{product.productName}}</h1>
</div>
<ion-content on-scroll="onScroll()" overflow-scroll="true" has-bouncing="false">
<div class="main-content">
<img src="img/video.png" class="video-img">
<div class="product-info">
//some content here
</div> <!--product info closes -->
</div> <!--main content closes-->
<div id="staticAboutTabs" class="demo-tabs">
<ul>
//customized tabs (want to make this tabs fixed bewlow header-bar)
</ul>
</div>
</ion-content>
</ion-view>
Instead of ion-tabs i have used my own customized tabs. let me know if the ion-tabs or any custom made tabs can be fixed inside scrollable ion-content
Try this by placing the to-be-fixed content inside <div slot="fixed"> </div>
<ion-content>
<div slot="fixed">
<ion-tabs #tabs tabsPlacement="top">
<ion-tab-bar slot="top" tabsHighlight="true">
<ion-tab-button tab="tab1">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab2</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</div>
</ion-content>