Screenshot of original card
I'm just copying the HTML code of ionic components into my App, but it is not styling like original sample.
<ion-view view-title="About us">
<ion-content padding>
<h1>About us</h1>
<ion-card>
<ion-card-header>
Header
</ion-card-header>
<ion-card-content>
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
</ion-card-content>
</ion-card>
</ion-content>
</ion-view>
but it returns me this Screenshot of result page
I've checked all css and js is working on page, except ionic components.
Okay, I've got the problem. It's the different documentations for ionic v1 and v2 but google only list ionic v2 docs.
http://ionicframework.com/docs/v1/components
http://ionicframework.com/docs/components
Thanks to all for your time.
Related
I am newbie to Ionic and mobile development. I am using ionic list, how to make text full available screen (see Last received in picture) and is it okay to use <ion-label> around <h4> and <p>?
<ion-list>
<ion-item *ngFor ="let connection of connections">
<ion-avatar slot="start">
<img [src]="connection?.picture">
</ion-avatar>
<ion-label text-wrap>
<h4>{{ connection?.name}}</h4>
<p text-wrap> Last received: {{ connection?.locationDesc }}</p>
</ion-label>
<ion-label slot="end" text-right>
<p item-end> 2 Messages </p>
<ion-button clear slot="end">View</ion-button>
</ion-label>
</ion-item>
It looks like it's just taking a little bit but what its actually doing is sharing 50 50 with the two labels you have put in to use as columns. It looks like its taking less than half because of the word-wrapping.
This is because labels are styled as flex items with those rules.
I managed to get it to this:
By using this code:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<img src="/assets/matthew.jpg">
</ion-avatar>
<ion-label class="ion-text-wrap">
<h4>Some name</h4>
<p> Last received: All plugins have two components - the native code (Cordova) and the
JavaScript code. Cordova plugins are also wrapped in a Promise or Observable in order to provide a common
plugin interface. Below are various framework options using the Camera plugin as an example. </p>
</ion-label>
<ion-note class="ion-text-end">
<p> 2 Messages </p>
<ion-button clear>View</ion-button>
</ion-note>
</ion-item>
</ion-list>
Basically I swapped the last ion-label to be an ion-note instead.
I have also messed around with other things like removing slots that weren't required and converting the attributes to appropriate utility classes which is now considered a best-practice (since they introduced react and vue which don't support these attributes).
For the last couple of days I have been trying to learn ionic because i have a school project and its so hard i dont even know where to begin .I had created an android app but my school kept on saying you gotta do it on ionic and as a "good" student i accepted.Are there any good guides? I cant seem to find any.
Also i want to create a list that has an icon on the left and some text on the middle.I want to make the icon and the text a little bigger but i have no idea how.Here is the code:
<ion-list>
<ion-item>
<ion-icon item-left name="moon"></ion-icon>
<h3>Bedrooms</h3>
</ion-item>
I would like to suggest you to go through documentation. And there are many tutorial video for latest ionic in youtube. That will help you alot.
and for your current font size issue, please try to edit either scss file for the given page but better update the sass variable in theme/variables.scss(please find a short tutorial here).
$item-md-font-size
<ion-list>
<ion-item>
<ion-grid>
<ion-row>
<ion-col col-2>
<ion-icon item-left name="moon"></ion-icon>
</ion-col>
<ion-col col-8>
<h3 ion-text text-center>Bedrooms</h3>
</ion-col>
<ion-row>
<ion-grid>
</ion-item>
<ion-list>
SCSS
ion-icon{
font-size: 25px!important
}
h3{
font-size: 30px!important
}
Here is documentation
https://ionicframework.com/docs/theming/css-utilities/
https://ionicframework.com/docs/theming/responsive-grid/
I work on a Ionic v3 app and I'm trying to display HTML in a *ngFor.
I've my TestPage.html with :
<ion-list *ngFor="let c of cities">
<ion-item>
<div [innerHTML]="c.html_rate"></div>
</ion-item>
</ion-list>
In c.html_rate I've some <ion-icon name="star-half"></ion-icon>.
But on the screen nothing appear...
I've also try: <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(c.html_rate)"></div>
But that does not work...
As shown in another question ion-item can only render particular elements. You are attempting to render an ion-icon within the ion-item component which doesn't work.
You can test this is true simply by replacing what is being injected into your div. If you swap <ion-icon name="star-half"></ion-icon> for <ion-note>Testing</ion-note>
So, i have built a website using ionic 3 and angular. One particularly annoying thing i have noticed is an always visible scrollbar that appears on all browsers when the website is accessed from windows machine.
This is fine on mac. I personal understanding was this should be dependent on browser rather the OS. But sadly same browser on different OS shows different behavior.
ultimately, the question is how do i get the same behavior as on mac when the contents are more than my view area. The code for the widget looks like below:
<ion-card class="dashboard-widget-layout dashboard-widget-1-2">
<ion-card-header class="dashboard-widget-card-header"><ion-label class="dashboard-widget-header">Smart Alerts</ion-label></ion-card-header>
<ion-card-content style="height: 320px" *ngIf="expanded == false">
<ion-scroll style="width:auto" scrollY="true" class="dashboard-widget-1-2" no-padding>
<ion-grid *ngFor="let opty of optys" style="border-top:1px solid #AFAFAF;margin-right:20px" text-wrap no-padding>
<ion-row text-wrap>
<ion-col (click)="editOpty(opty)" no-padding>
<ion-label class="widget-para-title" style="cursor:pointer">{{opty.name}}</ion-label>
<ion-label class="widget-para-text" style="cursor:pointer">{{opty.account}}</ion-label>
</ion-col>
</ion-row>
<ion-row text-wrap>
<ion-col>
<ion-label *ngIf="opty.recommendedAction.length > 0" style="margin-top:0px;">{{opty.recommendedAction[0].title}}</ion-label>
</ion-col></ion-row>
</ion-grid>
</ion-scroll>
</ion-card-content>
<ion-row><ion-col></ion-col>
<ion-col col-auto text-right no-padding>
<img style="color:white;margin-right:10px" src="{{arrowType}}" (click)="expandWidget()" />
</ion-col>
</ion-row>
</ion-card>
The view looks like this on mac (all browsers):
https://www.dropbox.com/s/v5eseru0ie304vu/Screenshot%202017-09-28%2017.28.37.png?dl=0
The view looks like this on windows(all browsers):
https://www.dropbox.com/s/rbd9lkyeqawow24/SmartAlertHomePageOOWDemoSnap.PNG?dl=0
Here I am! To solve your question!!
I wasn't going to forget about you bro...
go to app.scss
and add
.scroll-content{
overflow-y: auto !important;
}
this will solve most of your problems but you may still have some issues with ionic-lab's ios emulator.
If so, go to each html page and add no-bounce and overflow-scroll="false" to ion-content.
the code should look like this
<ion-content no-bounce overflow-scroll="false">
</ion-content>
lastly for your specific case you may need to add it to ion-card-content as well which would look something like
<ion-card-content no-bounce overflow-scroll="false">
</ion-card-content>
I'm new to Ionic. I have been trying to load several HTML files into the ion-slide. I already try out several solutions like this and this. Here is my code
<ion-view style="" title="Forum">
<ion-content class="has-header" padding="true" >
<ion-slide-box>
<ion-slide>
<h3 class="text-center">slide2</h3>
<ng-include src="'tes.html'"></ng-include>
</ion-slide>
<ion-slide>
<h3 class="text-center">slide3</h3
<ng-include src="'tes2.html'"></ng-include>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
The problem is that the page only shows the slide2 word and can be slide to slide3 but all of that slide do not content the HTML. The thing is that i'm still experimenting it on firefox browser. Is it because the browser or is there any special restriction for ng-include? Plunker