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
Related
I need to disable the default ion-ripple-effect in the `ion-button'.
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
I can't disable the pointer-events as I need it.
PS: I've referred the following posts and could not find a proper solution for Ionic 4.
How to remove click effect of an ion-item
Disable ripple effect on element
--ripple-color CSS variable could be used to turn off the ripple effect.
<ion-button class="no-ripple">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-button>
For example, we could set --ripple-color: transparent on the button, to effectively disable the effect.
.no-ripple {
--ripple-color: transparent;
}
Refer https://github.com/ionic-team/ionic/issues/19648
Just set mode to iOS
<ion-button mode='ios'>
I think it's only included with Android so you can set mode="ios" on the button to avoid that effect.
Yeah so I just checked the source code and it is only used with mode="md" (which is Android / Material Design):
<TagType
{...attrs}
class="button-native"
disabled={disabled}
onFocus={this.onFocus}
onBlur={this.onBlur}
>
<span class="button-inner">
<slot name="icon-only"></slot>
<slot name="start"></slot>
<slot></slot>
<slot name="end"></slot>
</span>
{mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</TagType>
That is the only way to do it using the button itself, the rippleType only offers bounded or unbounded, not a way to disable it.
I'm not sure if the ion-ripple-effect can be hidden with css because of the web components encapsulation used in Ionic 4.
In current version on Ionic 4, this is working example:
<ion-button class="submit-btn">...</ion-button>
.submit-btn {
--background: transparent;
--background-hover: transparent !important;
}
https://ionicframework.com/docs/api/button#css-custom-properties
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
Is there a built-in way to set background color on <ion-content> in Ionic 3?
In Ionic 1, we could set the color scheme for <ion-content> using classes like content-stable. In newer versions of Ionic, you can set the color of certain components with input variables, for example <ion-navbar color="dark"> or <ion-item color="dark">.
I've tried this kind of input on ion-content but without any success. I could set background-color manually, for example style="background-color:#ddd;", but if there is a 'proper' way to do this in Ionic I would rather do that instead. What is the 'official' way to do this?
There is no official way of doing this. Ionic does not provide any attribute or API to change the background color of ion-content directly.
You will have to go through setting up the css yourself.
Just eg:
In your scss file :
.bg-style {
background: red;
}
and apply style to content as in your component Html file :
<ion-content class="bg-style">
In your app.scss add:
.content {
background: #f9f9f9;
}
In .scss file, you can try with:
ion-content { background-color: map-get($colors, dark) !important; }
I want the user to be able to click and drag the scrollbar on the side of the screen while using my ionic app. Is this possible?
Ionic has a built in component called ion-scroll. It does what you have described and more. You can implement it inside your HTML like so.
<ion-scroll
scrollX="true"
scrollY="true">
</ion-scroll>
For me the solution was to add isBrowser variable to the controller which determined if this is mobile (no scroll bar) or desktop (draggable scrollbar).
<ion-content data-ng-class="{ isBrowserView : appCtrl.isBrowser }"
overflow-scroll="{{ appCtrl.isBrowser }}">
...
</ion-content>
And I added the following to me scss file:
.isBrowserView {
overflow-y: auto !important;
}
.isBrowserView .scroll-bar-indicator {
display: none;
}
*If you always want the scrollbar then do not worry about setting the value on a controller. Like so:
<ion-content class="isBrowserView"
overflow-scroll="true">
...
</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 !