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>
Related
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 have created a form using Ionic Creator.
https://creator.ionic.io/share/fdd3f4198103
I am unable to see the borders of select as you can see in my image below.
Source code is :
<script src="http://code.ionicframework.com/1.3.1/js/ionic-angular.js"></script>
<script src="http://code.ionicframework.com/1.3.1/js/ionic.js"></script>
<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<ion-view title="Credentials" id="page9" class=" ">
<ion-content padding="true" class="has-header">
<form id="credentials-form11" class="list ">
<label class="item item-select " id="credentials-select5">
<span class="input-label">Select Router</span>
<select>
<option>HData</option>
<option>Ajay</option>
<option>Test</option>
</select>
</label>
<ion-checkbox>Create Hotspot</ion-checkbox>
<label class="item item-input item-stacked-label " id="credentials-input13">
<span class="input-label">Password</span>
<input type="password" placeholder="sample">
</label>
<ion-checkbox>Show Password</ion-checkbox>
</form>
<div class="list card " id="credentials-card21">
<ion-item class="item-icon-left dark " id="credentials-list-item7">
<i class="icon ion-stats-bars"></i>Progress</ion-item>
<div style="margin: 0px; line-height: 250px; text-align: center; background-color: rgb(232, 235, 239);">
<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
</div>
<div class="item item-body " id="credentials-list-item-container1">
<p id="credentials-null" style="margin-top:0px;color:#000000;" class=" ">Some friendly
<strong>markdown</strong>
</p>
</div>
</div>
<div id="credentials-button-bar4" class=" button-bar ">
<button id="credentials-button7" class=" button button-positive button-block ">Clear</button>
<button id="credentials-button8" class=" button button-positive button-block ">Continue</button>
</div>
</ion-content>
</ion-view>
My output in application is as below.
If anyone could help with the problem of border would be really helpful.
I also applied class for border .itemborder{
border: 1px solid #4a87ee;
border-radius: 3px;
margin:10px;
} but its not working.
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
I want to set a image for background in ionic. here is my code.it's not working.in here style sheet is not working. when I should add the style sheet ? I dnot know how to find the error.
<ion-side-menus enable-menu-with-back-views="false" style="background: url('../img/background.jpg');background-size: 100% 100%;background-repeat: no-repeat;color: #EF4836;">
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header ionBarM " align-title="center">
<ion-nav-back-button style="color: white">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear button-light ion-navicon custom-icon" menu-toggle="right" style=" color: white;">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<div class="bar bar-subheader ionSubBar ">
<div class="button-bar">
</div>
</div>
<ion-content class="has-subheader" style="background: url('../img/background.jpg');background-size: 100% 100%;background-repeat: no-repeat;color: #EF4836;">
<ion-refresher .... </ion-refresher>
<ion-list>
<div class="list list-inset" data-ng-repeat="announcement in announcements">
<a class="item item-thumbnail-left" ui-sref="app.shop({id:announcement.id})" ng-click="showshop({{$index}})">
......
</a>
</div>
</ion-list>
</ion-content>
</ion-side-menus>
Do like this,
Style.css
/*Back Ground image For App*/
ion-view {
background-image:url("../img/background.jpg") !important;
background-repeat:no-repeat;
background-size:cover;
overflow:hidden;
}