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 !
Related
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 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
I tried to put it like this, like on the example
<ion-col col-md-6>
<ion-list>
<ion-item>
<ion-label floating>Type</ion-label>
<ion-select interface="popover" [(ngModel)]="userType">
<ion-option value="1">Type 1</ion-option>
<ion-option value="2">Type 2</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
but the output is not similar on the example on the ionic documentation.
here is the output
I want something like this
What you are seeing is actually a platform issue: Ionic styles elements according to the platform you are running on. See the docs on this here.
You can also easily reproduce your issue viewing the ion-select docs and changing between iOS and Android.
iOS output:
Android output:
So assuming your developing for the iOS platform you don't have to change anything in your app to get the look you want. Once you deploy your app on an iOS device everything will look as you expect.
While testing your app in browser (I'm assuming Chrome, other browser might have the same feature) you might want to use the dev tools (F12) and toggle the device mode. There you can choose to see the viewport of a iPhone or iPad and after refreshing the page (F5) you should see the correct controls.
I'm working with Ionic 3 on iOS 11. Ever since upgrading to iOS 11, my buttons don't work inside Modals. Specifically speaking, the (click) events don't trigger:
HTML:
<button ion-button (click)="logoutUser()">LOGOUT3</button>
JS:
logoutUser() {
console.log('Logout the user');
}
Does anyone have any idea what might be wrong here?
Make sure you add a z-index to the outer most box in which your button resides.
the last time I used Ionic was like a year ago. Now I create a new proyect but I realize that all teh css components of ionic had changed but if a try to use something new I cant because I think i'm using an old version.
For instance - this code, I took it from the official docs:
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>
and they show up like plane buttons without style.
But if I write them as I used to, just works.
<button class="button button-positive">
Boton prueba 2
</button>
The thing is as Ionic changed their docs I don't have any reference now to look out so I don't have another alternative to update. Going nuts to accomplish this.
Thanks