I have set up ionic environment
1) node and npm
2) cordova and ionic with sidemenu template
While using the ionic 4 components in the application its classes are not working
You can see it shows button without css.
Any help is appreciated.
Thank you
Components are working, I can see <ion-content> and <ion-header> in the console. probably you css is not working , try this in html
<ion-content padding>
<button ion-button class="btn">My button</button>
</ion-content>
and in scss
.btn{
background: red;
}
you can change the css property it this btn class and it should reflect when running the app
Related
I am using Ionic 6 / Angular and have this html in a component:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
In chrome mobile view it looks good but on my mobile I can only see half the header.
Here is a screenshot:
screenshot here
What is the problem?
This element needs a little padding.
You have to add a the variable ion-safe-area-top in the "variables.scss" file.
:root {
...
--ion-safe-area-bottom: 22px;
}
Also you need to add styles for the first ion-toolbar inside ion-header element.
ion-header ion-toolbar:first-of-type{
padding-top: var(--ion-safe-area-top, 0);
}
Not sure what the exact issue is but I was able to resolve it by
Creating a fresh project on v6 -> Copy the files from the old project across to the new -> rebuild the android app and the issue disappeared.
I had the same problem and this solved the issue for me.
As this issue only happens with Andriod, I defined a variabel to detect if the device is Android. If Yes then apply a padding to the header
In app.component.ts
if (this.platform.platforms().includes("android"))
this.isAndroid = true
In app.component.html
<ion-header [translucent]="true" [class]="isAndroid? 'android-header' : ''">
In app.component.css
.android-header {
padding-top: 20px;
}
I have a problem with ion-button in ionic v4
If I write in my app
<ion-button>Hi</ion-button>
And run the application, the app show the button with te text in uppercase
I need the buttons to be shown with the text as I wrote it. Please
In ionic-5, in theme/variables.css, you could add the following
ion-button {
text-transform: none;
}
This would apply for the entire app. Also refer this github issue comment.
Try to use text-capitalize, for every first words in UperCase
<span text-capitalize>hi</span>
or text-transform, for normal text
<span style="text-transform:none!important;">Hi Hi</span>
For more examples and other utilities check this doc, you'll like!
You can solve it by adding just inline css as following :
<ion-button style="text-transform:none">Your Text</ion-button>
Try to use mode="ios". Tested on ionic 5 :
<ion-button mode="ios">Your Text</ion-button>
You can add this style in the global.scss
ion-button { text-transform: none; }
I have tested this code and it works well
I have a very simple app so far, but I can't figure out how to fix the overlapping of the content (header on top of the content). I have created a component header that contains the header as the name suggest.
header.html
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
I have been trying to use it on different pages, but it always overlaps the content of the page.
page.html
<app-header></app-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
I have tried using div tag instead of ion-content, and also tried using class="has-header", but nothing seems to be working. Although, if don't use the header as a component such as the following, it works fine. But I want to use the header as a component so that I can reuse it on other pages.
page.html (don't want to have it like this)
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
As pointed out in this thread of Ionic official forum by #brandyshea of Ionic team, the thing is that in one page you can only have 3 kind of tags as top tags, everything else must go inside one of them. The 3 tags are:
<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>
I was trying to organize my app as #Hafiz and stumbled on the same problem, the solution has been to put my custom header (<ew-navigazione-top>) inside <ion-header> in each page.
<ion-header>
<ew-navigazione-top [ew_title]="navParams.get('label')" [ew_subtitle]="The subtitle"></ew-navigazione-top>
</ion-header>
P.S. This is the solution for Ionic 3. For previous versions on the same linked thread you can find other specific solutions.
try with below :
<app-header></app-header>
<ion-content style="margin-top:__px">
<h1>Some Page</h1>
</ion-content>
In my ionic app, the ion-input simply not render and I don't discovered why, yet.
For example, this code not render:
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
Just the Floating Label appears, but the input effect not works and I cannot type anything.
What am I forgetting?
And more, the input style using the input tag is in bold, and in my own css am not changing the default style.
I am also facing same issue. After googling, came to know this not work in Ionic 1. Ionic version 1 will not support ion-iput. This is supporting from Ionic 1 later versions like ionic 2,etc.
I think that you did not create an Ionic2 application !
I am working on android project with ionic framework.
I have www\templates\home.html in which I am using images for item icon.
my view code home.html
<ion-content>
<div class="row gray">
<div class="col"><div class="abc"></div>
Opening Balance</div>
</div>
</ion-content>
my css in style.css:
.abc{
background: url('../img/icon.png');
}
Anyone have any suggestions?
Thanks in advance
make sure the file path is correct
make sure the permissions on the file are allowed. If you copied the image from somewhere, the permissions may not allow you to use it on your project.