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;
}
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
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/
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
On an app with Ionic and AngularJs, I try to create a new template with a header. Unfortunately some content is hidden by the header.
Here is my code:
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"/>
<div class="bar bar-header bar-stable">
<h1 class="title">XXX</h1>
</div>
<ion-content class="has-header">
<div class="padding-horizontal">
<h4 class="center">Sign in</h4>
<button class="button button-block button-positive">Sign In</button>
</div>
<hr>
<div class="padding-horizontal">
<h4 class="center">Don't have an account?</h4>
<button class="button button-block button-positive">Sign Up</button>
</div>
</ion-content>
Or JsFiddle: http://jsfiddle.net/cyef9sxs/1/
Thank you!
Well you need to specify the position absolute and width for the ionic element.
.has-header {
top: 44px;
position:absolute;
width: 100%;
}