Ionic 4 - angular 7
ion-item-bg - CSS
.ion-item-bg{
--background: transparent;
--color:#fff;
border-bottom: 1px solid #fff
}
<ion-item class="ion-item-bg" lines='none'>
<ion-label class="open-sans-light" position="floating" style="--color:#fff;">
email
</ion-label>
<ion-input formControlName='email' autocomplete='off'></ion-input>
</ion-item>
If we save the credentials, then on reloading the UI looks like the image
Tried autocomplete off and all , but still facing the issue.
You have only said what is wrong, not what you actually want.
I'm assuming you want the textbox to be transparent as well?
Looks like you need to style the ion-input.
ion-input {
--background: transparent;
}
If that doesn't work sometimes I've had to use:
ion-input {
--background: transparent;
background: transparent;
}
Or even put !important;'s on them.
Related
I am working on the Ionic 5 application for iPad/Tablet. I want to increase the font size of ion-input for full app.
I have tried various options
ion-input {
font-size: 20px !important;
}
input {
font-size: 20px !important;
}
But none of it is increasing the font size. I have even tried to increase the browser inspect element there also it has increased the space but font size is same.
My code structure is
<ion-item class="ion-padding-horizontal">
<ion-label class="input-label" position="stacked">Email</ion-label>
<ion-input class="input-text" type="email"></ion-input>
</ion-item>
When I give font size in the input-text class it is just increasing the size of the input, not the font size
make sure you input is in an ion-item element and then give it your class like this:
CSS:
.size {
font-size: 30px;
}
HTML:
<ion-item>
<ion-input class="size"></ion-input>
</ion-item>
I tested it just now. it works.
In Ionic 4, I know that for some things I'm supposed to use shadow dom, and modify components like this:
ion-button {
--ion-font-family: 'Montserrat', sans-serif;
--border-radius: 8px;
}
But what if I want to change the font weight of the button?
If you look at the css for the button, you'll see that there's no shadowdom css variable for weight like there is for padding or font-family:
.sc-ion-buttons-md-s ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 8px;
--padding-end: 8px;
--box-shadow: none;
height: 32px;
font-size: 14px;
font-weight: 500;
}
The only way I can do it as far as I can tell is to do inline styling like this:
<ion-button color="primary" fill="solid" shape="round">
<p class="ion-padding-horizontal" style="font-weight: 700;">Get Started</p>
</ion-button>
But now I feel like its 1996 all over again. What's a clean way to do this?
i added:
ion-button {
font-weight: 700;
}
to one of my random projects and it works as expected.
i then added the <p> </p> tags like you have in your example code inside my button with the text for the button and the font-weight no longer effected the text.
maybe remove the <p> </p> tags if you are using them then try again.
I have a button with shape round as follows:
<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>
The class shadow-red is:
.shadow-red{
box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
border-radius: 5px;
}
And the result is:
So I tried many different ways to change the round shape but since it isn't a css class doing the following didn't work.
.round{
border-radius:5px!important;
}
I tried adding border-radius:5px!important; to ion-button class, button, .btn, and many other combinations but none of them worked.
I have also tried to add to variables.css the following lines and none of them worked:
--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....
Don't use the shape attribute, now you can change the look of the button to your wishes. One thing to change is the expand attribute. If you set it to full, you remove the left and right borders (see in docs). And so you can't set or change the border-radius. Set it to block and you will still have a full-width button.
<ion-button expand="block" class="shadow-red">Signup with</ion-button>
Use the following CSS custom properties as described in the Ionic 4 docs.
.shadow-red{
--border-radius: 5px;
--box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}
Result:
Following code worked for me. As per your need change the height and width value to meet your requirement.
<ion-button slot="end" shape = "round" style="height: 3rem; width : 3rem">
<ion-icon name="create-outline" slot="icon-only"></ion-icon>
</ion-button>
Posting here for future references.
If you want to change the ionic button radius we can use following css. it is working on expand="block" attribute
ion-button {
--border-radius: 20px;
border-radius: 20px;
}
But in ionic button, when we use expand="full" attribute it does not work. so to overcome this limitation we can use CSS Pseudo-elements.
to add a border radius to the bellow button
<ion-button fill="solid" type="submit" color="primary" expand="full" >Login</ion-button>
as bellow image we need to select the native element within the shadow DOM
we can use below Pseudo-elements selector
ion-button::part(native) {
--border-radius: 20px;
border-radius: 20px;
}
above will add the radius on the ionic button with expand="full" attribute
So my problem is that under my label i have an underline that i want to delete. i added no-lines to my ion-label but it's seems to not working.
Is there a way to delete it ?
<ion-item class="checkbox" >
<ion-label></ion-label>
<ion-checkbox class="checkbox-square" (ionChange)="changeEvent($event)"></ion-checkbox>
</ion-item>
And this is the css
.checkbox{
font-size: 1.03rem;
color: $blue-love;
max-width: 400px;
margin: auto;
}
Add this to your css
.checkbox .item-inner {
border-bottom: none !important;
}
Without touching the CSS: This worked out for me
https://www.codegrepper.com/code-examples/html/how+to+remove+the+underline+from+ion+item
TLDR;
<ion-item lines="none">
<ion-tags...>
</ion-item>
Add custom class inside ion-label element:
<ion-label class="custom-label-style">
Label content
</ion-label>
Then style it with text-decoration property:
.custom-label-style {
text-decoration: none;
};
I am using a <textarea> with Ionic 3 but when I type in, only the first character is displayed, not the rest.
Only wait to display them is to close the keyboard, scroll the page and come back.
Here is my code:
//view
<textarea class="textarea" spellcheck="true" autoComplete="true" autocorrect="true" placeholder="Message" [(ngModel)]="message"></textarea>
//css
textarea.textarea {
width: 100%;
background-color: #fff;
border: 0.55px solid #c8c7cc;
border-radius: 5px;
padding: 4px 45px 4px 4px;
-webkit-appearance: none;
}
I guess it is a refreshing issue but don't know how to solve it.
Ionic has its own version of textarea called ion-textarea:
https://ionicframework.com/docs/api/components/input/Input/
It is normally used in the context of a list to structure the content:
<ion-list>
<ion-item>
<ion-textarea placeholder="Enter a description"></ion-textarea>
</ion-item>
</ion-list>
This should also avoid your input problem.
if you can use , use this code.
I think textarea doesn't work in ionic well.