I have used ion-slide-box to show slides on home page of application,
But i can't found the fade effect to ionic slide box.
I have used the following code to show slides , please suggest me how to add fade effect ion-slide-box. (Ionic Version - 1.7.15)
<ion-view>
<ion-content>
<div class="top-icons">
<div class="row paddings">
Some content are here
</div>
</div>
<div class="slider-container">
<ion-slide-box show-pager="true" does-continue="true" auto-play="true" slide-interval="5000">
<ion-slide class="slider-res">
<img src="image/slider/img1.jpg" />
<div class="slider-text">Text Content</div>
</ion-slide>
<ion-slide class="slider-res">
<img src="image/slider/img2.jpg" />
<div class="slider-text">Text Content</div>
</ion-slide>
<ion-slide class="slider-res">
<img src="image/slider/img3.jpg" />
<div class="slider-text">Text Content</div>
</ion-slide>
<ion-slide class="slider-res">
<img src="image/slider/img4.png" />
<div class="slider-text">Text Content</div>
</ion-slide>
</ion-slide-box>
</div>
<div>
Other Content are here
</div>
</ion-content>
</ion-view>
Please help me to solve this issue.
Related
I am trying to align the bottom picture to the right of the table. I know that i am missing a small setting here, but cant seem to find it. At the bottom code it is the saleForMonth element that I want to align it to the right.
<mat-sidenav-container>
<mat-sidenav-content style="height:99vh;">
<div style="float:left; margin:22px 0px 0px 32px;">
<div style="text-align:center;">
</div>
<button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;" (click)="sidenavOpen('sale',sidenav)">
<b>SALE</b>
</button>
<button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;margin-left:2px;" (click)="sidenavOpen('upgrade',sidenav)">
<b>UPGRADE</b>
</button>
<div style="margin-top:53px">
<div>
<salesByPackage></salesByPackage>
</div>
<div style="margin-top:240px;">
<salesByCampaign></salesByCampaign>
</div>
</div>
</div>
<div class="container" style="margin-top:20px;float:right">
<div class="col-lg-9">
<mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
<mat-tab label="SALES">
<orders></orders>
</mat-tab>
<mat-tab label="UPGRADES">
<upgrades></upgrades>
</mat-tab>
</mat-tab-group>
</div>
<!-- Change to this -->
<div class="col-lg-3">
<div>
<salesForMonth></salesForMonth>
</div>
</div>
</div>
</mat-sidenav-content>
<div class="row" style="float:right">
<div class="col-lg-3">
<salesForMonth></salesForMonth>
</div>
</div>
Or you can use empty div at the left side and set it with col-lg-9
<div class="row">
<div class="col-lg-9">
</div>
<div class="col-lg-3">
abc
</div>
</div>
If your component salesForMonth is not of full width, Try this CSS -
<div style='width:100%; float:right'>
<salesForMonth></salesForMonth>
</div>
else just put float:right on your element.
<div class="container col-lg-9" style="margin-top:20px;float:right">
<mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
<mat-tab label="SALES">
<orders></orders>
</mat-tab>
<mat-tab label="UPGRADES">
<upgrades></upgrades>
</mat-tab>
</mat-tab-group>
</div>
<!-- Change to this -->
<div class="container col-lg-3">
<div>
<salesForMonth></salesForMonth>
</div>
</div>
put those 2 blocks into container and partition them as col-lg-9 and col-lg-3
I'm trying to increase the size of the ion-slide and the img to match each other.
I'm trying to do this using CSS, but I'm not managing to increase the size of the two together.
HTML:
<ion-view view-title="Prefeitura Municipal">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-content>
<ion-slide-box>
<ion-slide>
<div class = "box boxImagem">
<img ng-src="img/Boletos.jpg" class="minha-imagem">
</div>
</ion-slide>
<ion-slide>
<div class = "box boxImagem2">
<img ng-src="img/Arraiá.jpg" class="minha-imagem">
</div>
</ion-slide>
<ion-slide>
<div class = "box boxImagem3">
<img ng-src="img/Alimentação.jpg" class="minha-imagem">
</div>
</ion-slide>
</ion-slide-box>
<div>
<div class="row icon-row">
<ion-item class="col text-center">
<img class="full-image" src="img/capitol-building.png"></img>
<br>Prefeitura
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/leader-with-loudspeaker.png" ui-sref="app.principal"></img>
<br>Ouvidoria<br>
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/earth-pictures.png"></img>
<br>Turismo<br>
</ion-item>
</div>
<div class="row icon-row">
<ion-item class="col text-center">
<img class="full-image" src="img/college-graduation.png"></img>
<br>Educação <br>
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/doctor-stethoscope.png"></img>
<br>Saúde
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/bus-service.png"></img>
<br>Serviços<br>Públicos
</ion-item>
<!-- <ion-item class="col text-center">
<a class="botao button button-positive" href="#/app/site">Icon</a>
<br>Site
</ion-item> -->
</div>
</div>
</ion-content>
<div class="bar bar-footer bar-balanced">
<button class="button icon ion-android-home">Inicio</button>
<h1 class="title">Prefeitura</h1>
<button class="button icon ion-earth pull-right">Site</button>
</div>
</ion-view>
CSS
boxImgem, .boxImagem2, .boxImagem3{
width: 100%;
height: 100%;
}
.minha-imagem{
float: left;
width: 100%;
text-align: center;
margin: 0px 0px 0;
}
As far as I know the width is set via JavaScript and thus will overwrite the css rules.
Also it's easier to help if you use a service such as codepen to create a working demo of your code
I am working on ionic1 and angularjs I have already worked with tabs but now I am facing an issues where my tabs should be appear only in a particular div so on the particular area of my html page only my ion-tabs should work but it is not displaying well as we i am expected.
here is my .html page
<ion-modal-view>
<div class="bar bar-header bar-calm">
<button class="button icon ion-navicon"></button>
<h1 class="title">Happy Home</h1>
<button class="button" ng-click="closeLogout()">LogOut</button>
</div>
<ion-content>
<div class = "row responsive-sm" style = "padding-top:50px">
<div class = "col">
<label class="item item-input item-select">
<br>
<select>
<option>B09-301</option>
<option selected>G45-94</option>
<option>R8910</option>
</select>
</label>
</div>
</div>
<div style="background-color: #DEE0E0">
<div class = "row">
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-home item-floating-label" ></i>
MEMBERS
</div>
</div>
</div>
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-model-s item-floating-label"></i>
Vechical
</div>
</div>
</div>
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-bookmarks item-floating-label"></i>
Booking
</div>
</div>
</div>
</div>
<div class ="row">
<div class = "col col-top">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-person-stalker item-floating-label"></i>
Staff
</div>
</div>
</div>
<div class = "col col-top">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-home-outline item-floating-label"></i>
Visitor
</div>
</div>
</div>
</div>
</div>
<div class = "row">
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tab title="MyDues">
<ion-content>
<h1>happy home Dues</h1>
</ion-content>
</ion-tab>
<ion-tab title="Deposite">
<ion-content>
<h1>happy home Deposite</h1>
</ion-content>
</ion-tab>
<ion-tab title="Advance">
<ion-content>
<h1>happy home Advance</h1>
</ion-content>
</ion-tab>
<ion-tab title="History">
<ion-content>
<h1>happy home History</h1>
</ion-content>
</ion-tab>
</ion-tabs>
</div>
</ion-content>
Here you can see the ion-tabs where i have implemented the tabs div
and here is the sample image where i should use ion-tabs help me if some one know how to use the ion-tabs for my MY DUES,ADVANCE,DEPOSIT,HISTORY.
THANK YOU,
Put inside of <div> and add this css to this div
width: 100%;
position: fixed;
Working for me
I am working on ionic 3, I got this way, I put the tab inside ion-content and works for me.
<ion-content>
<ion-card>
<ion-row fixed padding>
<ion-col>
<h2 class="card-titulo"> Localidade</h2>
<h2 class="card-titulo"> Data Início</h2>
</ion-col>
<ion-col>
<h2 class="card-descricao">
<ion-icon name="pin"></ion-icon>
Fortaleza-CE
</h2>
<h2 class="card-descricao">
<ion-icon name="calendar"></ion-icon>
24/01/18 10:47
</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Clima</ion-label>
<ion-select [(ngModel)]="clima">
<ion-option>Frio</ion-option>
<ion-option>quente</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Equipamento</ion-label>
<ion-select [(ngModel)]="equipamento">
<ion-option>Medidor</ion-option>
<ion-option>Equipament teste</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
<ion-content>
<tabs-obra></tabs-obra>
</ion-content>
<ion-fab bottom right>
<button ion-fab mini (click)="abrirListaAtividade()">
<ion-icon name="checkmark"></ion-icon>
</button>
</ion-fab>
I just want to remove the tittle bar (header) (blue side part in image)inside this page.
my ionic code in about.html page
<nav-page hide-nav-bar="true">
<ion-view>
<ion-content class="app-view">
<div class="list-inset-feed">
<div class="item item-text-wrap">
<div class="row responsive-sm text-center">
<div class="col">
<h1 class="text-white">{{"about_page_title" | translate}}</h1>
<h3 class ="text-white">version 1.0.0</h1>
<div class="image_container">
<img alt="logo" height="100" src="img/logo.png">
</div>
<a class="text-white" href="#" onclick="window.open('http://abcd.html', '_system', 'location=yes'); return false;">
privacy policy
</a>
</div>
</div>
</div>
</div>
</ion-content>
Add hide-nav-bar="true" inside your <ion-view> tag.
HTML
<ion-view hide-nav-bar="true">
<ion-content >
</ion-content>
</ion-view>
I'm using the Foundation CSS framework create and off-canvas-menu, however, when I click the off-canvas-toggle anchor, the menu slides in and covers the entire screen. I am unable to get out of the menu. The example on the foundation page (http://foundation.zurb.com/docs/components/offcanvas.html) doesn't have this problem. Am I doing something wrong/missing something?
<div class="fill-h off-canvas-wrap move-right">
<div class='fill-h inner-wrap'>
<aside class="left-off-canvas-menu">
Left off canvas menu
</aside>
<div class="row fill-h">
<div class="xlarge-2 large-3 medium-1 columns show-for-medium-up fill-h" id="a">
<div class='row' id='navTabs'>
<div class='small-4 columns active'><img src='/img/icon.png' /><br/>Current</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>New</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>Phone</div>
</div>
<div id="navListing" ui-view="vw-listing">
</div>
<div id='nav_footer' class='small-12'>
<div id="adminMenuBtn">
Admin
</div>
footer
</div>
</div>
<div class="xlarge-10 large-9 medium-11 columns" ui-view="vw-details2">
<div style='background-color:#333;float:left;'>
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</div>
<div ng-include="views/interactions/details-blank.html"></div>
</div>
</div>
<a class="exit-off-canvas"></a>
</div>
</div>