İ m trying to change the item color. Css is not working or i m missing something else?
<ion-view title="Add order to a table">
<ion-content class="has-header has-subheader">
<ion-list>
<ion-item ng-repeat="table in tables" type="item-text-wrap" class="item-avatar"
href="#/app/tables/{{table.id}}">
<div ng-class="{table.Status === '0': 'red'}">
{{table.Tablename}} - {{table.Status}}
<p ng-class="radio-high">dfsa</p>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
You have to do it like this as in Stackhelpers answer but the table.Status has to be capitalised or it will not work:
<ion-view title="Add order to a table">
<ion-content class="has-header has-subheader">
<ion-list>
<ion-item ng-repeat="table in tables" type="item-text-wrap" class="item-avatar" href="#/app/tables/{{table.id}}">
<div ng-class="{ 'red' : table.Status === 0 }">
{{table.Tablename}} - {{table.Status}}
<p ng-class="radio-high">dfsa</p>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
ng-class="{ 'red' : table.status === 0 }"
Please try and share your observations
Related
The below is the html code for an ionic page. I am trying to apply padding and adjust the location of the content. In some places it is not working.
I want the login form to be located further down in the screen. Changing the values of <div padding-top="100px">(line 10 in the code)
is not doing anything. How to correct this?
Login.html
<ion-header>
<ion-navbar color="primary">
<div class="row">
<ion-title>Login</ion-title>
</div>
</ion-navbar>
</ion-header>
<ion-content padding>
<div padding-top="100px">
<form [formGroup]="loginForm" (submit)="loginUser()" novalidate padding id="loginForm">
<ion-item id="loginItem_1">
<ion-label stacked id="loginLable">Email</ion-label>
<ion-input #email formControlName="email" type="email" placeholder="Your email address"
[class.invalid]="!loginForm.controls.email.valid &&
loginForm.controls.email.dirty" color="secondary">
</ion-input>
</ion-item>
<ion-item class="error-message" *ngIf="!loginForm.controls.email.valid &&
loginForm.controls.email.dirty" id="loginItem">
<p id="loginLable">Please enter a valid email.</p>
</ion-item>
<ion-item id="loginItem_2">
<ion-label stacked id="loginLable">Password</ion-label>
<ion-input #password formControlName="password" type="password" placeholder="Your password" color="secondary">
</ion-input>
</ion-item>
<button ion-button block type="submit" id="loginButton">
Login
</button>
</form>
</div>
<button ion-button block clear (click)="goToResetPassword()">
I forgot my password
</button>
<button ion-button block clear (click)="createAccount()">
Create a new account
</button>
</ion-content>
<ion-footer>
<ion-toolbar color="primary">
<ion-title>Created By</ion-title>
</ion-toolbar>
</ion-footer>
View
Don't use inline styles. Which is very very BAD.
You can try as shown below.
page.html
<div class="padding-top-100">
</div>
page.scss
.padding-top-100 {
padding-top:100px;
}
Inline CSS needs to be defined in the style HTML attribute like so:
<div style="padding-top: 100px;">
There is no "padding-top" attribute hence why it's not doing anything
I would recommend giving that div an id / class and targeting it with CSS instead, makes it easier to manage (Ionic comes with basic styling by default)
Try using this:
<ion-content padding="true">
You can see the example on this website :
http://ionicframework.com/getting-started
I have created a simple chat form in Ionic.
Problem: Buttons are going out of screen.
It looks like this this -
My chat.html
<ion-header>
<ion-navbar>
<ion-title>communicationgiven</ion-title>
<button ion-button (click)="close()" style="margin-left: 90%;margin-top: -3%">Close</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<div>
<p *ngFor="let list of list; let i = index;">
<ion-item>
<!-- <p style="color: #1bb0f4;font-size: 20px;">Tagto {{list.TAG_TO}}</p> -->
<p style="color: #1bb0f4;"> {{list.TAG_FROM}}</p>
<p style="color: #d2dce1;"> {{list.TAG}}</p>
</ion-item>
</p>
</div>
</ion-list>
</ion-content>
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
<button ion-button type="submit" style="margin-left: 90%;margin-top: -5%;">Submit</button>
</form>
</ion-footer>
I want to know why my buttons are going out of the page; how can I make sure they stay inside the screen, irrespective of the screen size?
What is the best practice here? I am fairly new in CSS.
You have to use below code for left button
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Page Title
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openModal()">
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
For footer you can use ion-grid
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-grid>
<ion-row>
<ion-col col-9>
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
</ion-col>
<ion-col col-3>
<button ion-button type="submit">Submit</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-footer>
For more info please refer this
https://ionicframework.com/docs/api/components/toolbar/Navbar/
you had given style="margin-left: 90% that is margin from left side is 90% so obviously it will go out of screen, try to decrease the value.
It's hard to answer this one as I can't replicate the issue locally with what you've provided.
I'd start by reducing the margin-left: 90% on the button element, see how that goes.
In regard to best practices, an important one is to not use inline styles. That is putting styles in the style html attribute. Instead try using an external style sheet or at least an internal style sheet, see: https://www.w3schools.com/css/css_howto.asp
I am experiencing a problem showing a map in my page.
This is my code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Cerca
</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-segment [(ngModel)]="mySegment">
<ion-segment-button value="Mapa">
Mapa
</ion-segment-button>
<ion-segment-button value="Lista">
Lista
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="mySegment">
<div #map id="map" style="height:100%;" *ngSwitchCase="'Mapa'" (click)="openBestofferdetailPage(offer)">
</div>
<div *ngSwitchCase="'Lista'">
<button ion-item *ngFor="let offer of offersmodelArray" (click)="openBestofferdetailPage(offer)">
<ion-thumbnail item-left>
<img src="{{offer.imageoffer}}">
</ion-thumbnail>
<p style="font-size:50%;">
<ion-row>
<ion-col>
<span item-left>{{offer.cityprovider}}</span>
<span item-left>({{offer.distanceToProvider}} km)</span>
</ion-col>
<ion-col right text-right>
<s>
<span item-right>{{offer.oldprice}}</span>
</s>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<span item-left>{{offer.sold}}</span>
<span item-left>comprados</span>
</ion-col>
<ion-col right text-right>
<b><p style="font-size:70%;" style="color:green">
<span item-right>{{offer.newprice}}</span>
</p></b>
</ion-col>
</ion-row>
</p>
</button>
</div>
</div>
</ion-content>
The default option is "Mapa" however it doesn't show the map, I guess is an issue related to the position setup and the <ion-segment> but I would appreciate your help on understanding where I can make the change.
Just as a complementary information if I set the map outside the content the map is being showed without any problem
<ion-content padding>
<div #map id="map" style="height:100%;"></div>
</ion-content>
I saw some related question but without answer
Ionic 2, use google maps in ion-segments
Please your help
I'm developing an ionic app and I need to align the navbar back button on right side. The following is my code:
<ion-view title="Home" ng-controller="HomeCtrl" style="padding-top: 50px">
<ion-nav-bar class="bar-balanced bar-dark">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content scroll="true">
<ion-list>
<ion-item ng-repeat="item in items" href="#/res/{{item}}">
{{item.toUpperCase()}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
And I've tried following code for aligning button using ion-nav-buttons:
<ion-view title="Home" ng-controller="HomeCtrl" style="padding-top: 50px">
<ion-nav-bar class="bar-balanced bar-dark">
<ion-nav-buttons side="right">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content scroll="true">
<ion-list>
<ion-item ng-repeat="item in items" href="#/res/{{item}}">
{{item.toUpperCase()}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
But the above code throwing error like:
Error: [$compile:ctreq] Controller 'ionNavBar', required by directive 'ionNavBackButton', can't be found!
http://errors.angularjs.org/1.4.3/$compile/ctreq?p0=ionNavBar&p1=ionNavBackButton
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13380:12
at getControllers (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21319:19)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21445:33)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21457:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13)
at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20728:30) <ion-nav-bar class="bar-balanced bar-dark nav-bar-container" nav-bar-transition="ios">(anonymous function) # ionic.bundle.js:25642
ionic.bundle.js:1173 'webkitMovementX' is deprecated. Please use 'movementX' instead.
You can use this code:
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-arrow-left-c" ng-click="goBack()">back
</button>
</ion-nav-buttons>
and in your controller(s):
$scope.goBack = function() {
$ionicHistory.goBack(-1);
}
P.S.: in this case no <ion-nav-back-button></ion-nav-back-button> is used
Here is an example: http://codepen.io/beaver71/pen/NNWZBp
I'm new to ionic framework. I need to follow ionic tags to do sidemenu overlay. Please help me.
The default style of sidemenu gives only drag style but i need the side menu as a overlay.
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It's a toggleable side menu. If you want an overlay unfortunately you'll have to make your own.