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
Related
ion-view header bar is not displaying in my ionic app. can anyone tell me about the issue? i;ve tried aloot of things to fix it but nothing happens.
Offer.html
<ion-view style="font-family: 'Lobster', cursive; " view-title="Ad's Cafe">
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button></ion-nav-back-button>
<ion-content class="has-header">
<ion-list>
<button style="font-family: 'Cherry Cream Soda', cursive; "class="button button-full button-stable">
<i class="ion-speakerphone"></i>
Offer Details
</button>
<ion-item ng-repeat="offer in offers ">
<div class="list card">
<div class="item item-text-wrap item-divider">
<u> <h1><i class="ion-android-restaurante"></i>{{offer.Title}} </h1> </u>
</div>
<div class="item item-text-wrap">
<u><img style=" border: 1px solid black;
width: 100%;
height: auto" class="img-responsive " ng-src="{{offer.link}} "
> </u>
</div>
<div class="item item-text-wrap">
<h3> {{offer.Desc}} </h3>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I think you forgot to close </ion-nav-bar>
<ion-view style="font-family: 'Lobster', cursive; " view-title="Ad's Cafe">
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content class="has-header">
<ion-list>
<button style="font-family: 'Cherry Cream Soda', cursive; "class="button button-full button-stable">
<i class="ion-speakerphone"></i>
Offer Details
</button>
<ion-item ng-repeat="offer in offers ">
<div class="list card">
<div class="item item-text-wrap item-divider">
<u> <h1><i class="ion-android-restaurante"></i>{{offer.Title}} </h1> </u>
</div>
<div class="item item-text-wrap">
<u><img style=" border: 1px solid black;
width: 100%;
height: auto" class="img-responsive " ng-src="{{offer.link}} "
> </u>
</div>
<div class="item item-text-wrap">
<h3> {{offer.Desc}} </h3>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I'm using ionic in my project. How can I set the back button on the left in the header? Here is my code:
<ion-header-bar class="bar-positive" align-title="left" >
<h1 class="title" style="text-align: center">More Info</h1>
<button ng-click="myGoBack()" class="button button-clear"> <i class="ion- chevron-left " ></i> Back </button>
</ion-header-bar>
<ion-view>
<ion-content >
<ion-list class="list-inset" style="margin-right: 1%;margin-right: 1%">
<ion-item style="margin-right: 1%;margin-right: 1%" class="item-text-wrap" ng-init="missionDetail.getAllFicheMissionDetails(missionId,desId);">
vehicule :{{payloadMissionDetail.vehicule}}
Mission :{{payloadMissionDetail.mission}}
Chau1 :{{payloadMissionDetail.ch}}
Chau2 :{{payloadMissionDetail.ch2}}
Départ :{{payloadMissionDetail.depart}}
</ion-item>
</ion-list>
You can use below code.
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
#Documentation : http://ionicframework.com/docs/api/directive/ionHeaderBar/
<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
In the div two button and on image now how to set div in vertically center.
<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
div{
vertical-align: text-top;
}
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
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'd like to place an ionic button at the bottom right of a div. But it doesn't work as I expected. Here is the screenshot:
My html:
Ionic Blank Starter
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
</ion-slide>
</ion-slide-box>
The css:
.slider-container {
margin: 0;
padding:0;
position:relative;
}
.bottom-right {
position:absolute;
bottom: 0;
right: 0;
}
Can anybody help? Thanks.
And why not to do it this way?
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<div class="slider-container">
<img ng-src="{{image.src}}" style="width:100%;height:auto;margin:0;display:block" >
</div>
</ion-slide>
</ion-slide-box>
<div class="slider-container">
<button class="bottom-right button button-positive icon-left ion-home">Home</button>
</div>
...moving the button (and the container <div>) out of the slider.
When I needed to put the left and right buttons ("<" and ">") I used class "row" and "col"
<div class="row">
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-left" ng-click="slidePrevious()"></button>
</div>
<div class="col">
<ion-slide-box on-slide-changed="mudaSlide($index)">
<ion-slide ng-repeat="i in items">
<img class="button " ng-src="{{i.imagem}}" style="width: 128px; height: 128px; padding: 0; border: none; background: none;" ng-click="abreExibecaoImagem($index)"></img>
</ion-slide>
</ion-slide-box>
</div>
<div class="col col-10">
<button class="button button-block button-icon button-clear ion-chevron-right" ng-click="slideNext()"></button>
</div>
</div>
Result