I am seeing some very odd behavior of my ion-input field when i click inside of it. I have pinpointed it (and not sure why) to the padding-top in the parent div. I also noticed that if I scale back the text to a few words in the p. Any thoughts as to why this is happening or how i can fix it?
.main
.main {
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
padding-top: 100px; // IF I REMOVE THIS, IT IS NORMAL
&.no-nav {
padding-top: 0px;
}
&.no-content {
:before {
content: '';
position: absolute;
height: 1px;
width: calc(100% - 48px);
border-bottom: 1px solid $surface-03;
top: 96px;
left: 24px;
}
}
&.top-nav {
padding-top: 24px;
}
}
template code
<ion-content>
<div class="main">
<ion-card>
<ion-card-content>
<p>a bunch of text here that seems to push the input box in click down, if i only put a few words here it doesn't behave like this which is odd</p>
<form [formGroup]="" novalidate>
<ion-item>
<ion-input
formControlName=""
required
inputmode="text"
placeholder="Click in me"
></ion-input>
<ion-icon class="edit-icon"></ion-icon>
</ion-item>
</form>
</ion-card-content>
</ion-card>
</div>
</ion-content>
Here is the behavior
Related
I am struggling with getting styling correct. I think it is related to hierarchy of styling of the various ionic tags, but I am unsure.
In my app, I am trying to center some <ion-button> tags inside of columns of an <ion-grid>.
The result I keep getting is left-aligned buttons like this:
I have tried a variety of styles and classes to center the buttons. I have tried them at every level of the hierarchy (at the ion-item, grid, row, col, label, buttons, button levels), but I keep getting the same result.
Here is the structure of the item. In this iteration, you can see that I was trying to use the text-center attribute at the level of the row:
<ion-item>
<ion-grid>
<ion-row text-center>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button> Problem? </ion-button>
</ion-buttons>
</ion-label>
</ion-col>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button>More</ion-button>
</ion-buttons>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
I've read the ionic documentation on the scss styling, but they don't discuss nested items like a grid inside of an ion-item.
I suspect that some element's styling is over-riding my attempt to center the buttons here and I need to understand the basic principle of styling hierarchy. Is there a place to go to learn this?
I've included the entire .scss file for reference, but I suspect I'm missing a principle:
.ios,
.md {
page-home {
#container {
text-align: left;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
ion-item {
padding-top: 0.5rem;
}
.center-button {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-item: center;
}
ion-col {
text-align: left;
}
ion-label {
font-weight: bold;
}
ion-title {
font-size: 1.5rem;
}
.item-name {
font-size: 2rem;
}
}
}
Thanks!
You can achieve this by adding these two css properties to ion-label
display: flex;
justify-content: center;
This cannot be the right way to solve the problem, but this is what I eventually did: I just put the styling information inline in the HTML. Here's an example:
<ion-row style="width: 100%; text-align: center">
<ion-item style="width: 100%; text-align: center">
<ion-col size="4" style="align-content: center">
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickProblem('button', item.name)"
>
Problem?
</ion-button>
</ion-buttons>
</ion-col>
<ion-col
size="4"
style="width: 100%; text-align: center"
*ngIf="item.notes"
>
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickMore('button', item.notes)"
>More</ion-button
>
</ion-buttons>
</ion-col>
You can see the "width: 100%; text-align: center" throughout. It is not the most maintainable solution, but it got me out of the purgatory of no progress.
I want to change ion-label color inside an ion-item with ion-input when focused.
I am able to change the highlight color of ion-item using --highlight-color-focused: yellow; but unable to change the label color.
It is showing default color of label as primary but I want to change it as 'warning' or if required any custom color.
I've tried the following solution which is mentioned in Ionic github repository for same problem but didn't get my problem solved.
https://github.com/ionic-team/ionic/issues/18531
Following code I have used
login.page.html
<ion-content>
<div class="logo">
<div class="logoCenter">
<ion-icon name="sync"></ion-icon>
</div>
<h1 style="font-family: ProximaBold; color: white">Sample Application</h1>
</div>
<ion-grid style="margin-top: 10vh;">
<ion-row>
<ion-col size="12">
<ion-item>
<ion-label class="loginLabel" position="floating">Mobile No.</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
<ion-item>
<ion-label class="loginLabel" position="floating">Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid class="ion-padding">
<ion-row>
<ion-col class="ion-text-center" size="12">
<ion-button expand="full" shape="round" [routerLink]="['/home']">Submit</ion-button>
<p style="color: white;">Forgot Password?</p>
</ion-col>
</ion-row>
</ion-grid>
<p class="registerText">New Here? SIGN UP!</p>
</ion-content>
login.page.scss
ion-content {
--background: linear-gradient(180deg, #2ecc71, #289c59, #1a743f);
.logo {
margin-top: 20%;
text-align: center;
}
.logoCenter {
margin: 0 auto;
height: 150px;
width: 150px;
border-radius: 50%;
background: linear-gradient(290deg, #31da79, #29b866);
box-shadow: 20px 20px 60px #27ad60, -20px -20px 60px #35eb82;
display: flex;
justify-content: center;
align-items: center;
ion-icon {
zoom: 4;
color: white;
animation: rotating 2s linear infinite;
}
}
ion-item {
--background: transparent;
--border-color: white;
--color: white;
--highlight-color-focused: yellow;
}
ion-button {
--background: white;
--color: green;
}
.registerText {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
color: white;
font-size: larger;
}
}
#keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
add this in your page.scss
ion-item.item-has-focus > ion-label{
color: red !important;
}
ion-item
But because of material encapsulation "--color-activated" wont work properly. The easiest way is to target ion-label directly with !important.
This is my default ion-item "scss" file.
.ion-item{
--ripple-color: transparent;
&.item-has-focus ion-label {
color: gray !important;
}
ion-input {
--padding-bottom: 0 !important;
--padding-top: 0 !important;
}
}
Just add !important to your color it will stay focus on which color you have added
ion-label {
color: #fff !important;
}
I need to border-radius in ion-menu but when i am doing its applying on shadows of entire page. i need to just do in white menu.
This is how its showing
I need to show like this
My app.component.html
<ion-app>
<ion-menu side="end" contentId="menu-content">
<ion-content >
<div >
<div style="text-align: right;">
<ion-icon name="more" style="font-size: 25px;"></ion-icon>
</div>
<div style="display: flex; justify-content: center;">
<ion-avatar style="text-align: center;">
<img src="../../assets/img/demo.jpg">
</ion-avatar>
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
Downloads
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
Sign Out
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
</div>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>
global.scss
ion-menu{
--background: white !important;
--width: 150px;
--height: 170px;
}
When i add border-radius in ion-menu its just change the radius on entire blur page. I need to know hoe can i change the radis of just white box which have width of 150px;
Sergey was right, for these kinds of things you need to use popover - https://ionicframework.com/docs/api/popover.
Using your code I was able to create quickly the UI you needed.
Also, I've put the code on github so you could see what I did there: https://github.com/App-to-date/menu-popover
If help another person, work...
const popover = await this.popoverController.create({
component: MenuComponent,
event: event,
translucent: false
});
// INJECT BORDER-RADIUS
popover.shadowRoot.lastChild.lastChild['style'].cssText = 'border-radius: 20px !important;';
return await popover.present();
HTML:
<ion-menu side="end" contentId="menu-content">
[style]="sanitizer.bypassSecurityTrustStyle(yourStyle)">
TypeScript:
import {DomSanitizer} from "#angular/platform-browser";
yourStyle = "--background: white !important; --width: 150px; --height: 170px;"
constructor(private sanitizer: DomSanitizer)
We are trying to create a login form with rounded inputs. The problem is that after adding border-radius to inputs the login button becomes longer than inputs themselves. Here is the code:
<div class="appForm" ion-fixed padding margin-bottom style="position: absolute !important; top: 0%; bottom: 0%; left: 0; margin-bottom: 1%;">
<div class="logo">
<h2>Chat App</h2>
</div>
<ion-list style="margin-top: 43% !important">
<ion-item style="">
<ion-input class="input-field" [(ngModel)]="email" name="username" type="text" placeholder="Email"></ion-input>
</ion-item>
<ion-item>
<ion-input class="input-field" [(ngModel)]="password" name="password" type="password" placeholder="Password"></ion-input>
</ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
<p class="signin">
<button ion-button block clear (click)="RegisterPage()">Sign Up</button>
</p>
</ion-list>
</div>
Also here are the styles:
ion-item {
background-color:transparent !important
}
.input-field {
border:2px solid;
border-radius: 20px;
color: color($colors, light) !important;
}
.login-button {
text-transform: none;
border-radius: 20px;
background:linear-gradient(to right, #DD2476, #FF512F);
color: color($colors, light);
margin-top:15px !important;
}
...
...
How can we make the login button on the same width as inputs?
As you added your ion-input in ion-item it will add default 16px padding from left.
So either you add your button into <ion-item> like below
<ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
</ion-item>
Or you can override ion-item style and change or remove padding like below
default padding : padding-left: 16px;
ion-item {
background-color:transparent !important;
padding-left: 0px;
}
By doing this you can find your ion-input same like login button.
Hope this will helps!
I've got buttons which are not clickable when within the ion-content. When I bring them out, they work just fine. Here's my HTML and SCSS. Very strange behavior, maybe I'm missing something?
<ion-content no-bounce>
<div class="content_cover_exit">
<button class="exit-button" (click)="logoutUser()">
<ion-icon name="ios-exit-outline" class="icon-exit-class"></ion-icon>
EXIT
</button>
</div>
</ion-content>
.content_cover_exit {
width: 100%;
text-align: center;
position: fixed;
bottom: 70px;
z-index: 9999;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
.exit-button {
height: 2.0em;
border-radius: 5px;
opacity: 100%;
background-color: white;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 1.2px;
color: $dark-text;
z-index: 999999;
}
.exit-button.activated {
background-color: white;
}
.icon-exit-class {
color: $dark-text;
}
UPDATE:
Further research showed that even *ngIf doesn't work! this is begging to look super strange!
just add ion-button directive to you button tag and it will work fine.
ionic adds some enhanced with an ion-button directive.
<ion-content no-bounce>
<div class="content_cover_exit">
<button ion-button class="exit-button" (click)="logoutUser()">
<ion-icon name="ios-exit-outline" class="icon-exit-class"></ion-icon>
EXIT
</button>
</div>
</ion-content>
try like this
<ion-content no-bounce>
<div class="content_cover_exit">
<button class="exit-button"(click)="exitApp()">
<ion-icon name="ios-exit-outline" class="icon-exit-class"></ion-icon>
EXIT
<button>
</div>
</ion-content>
and your
.ts
import {Platform} from 'ionic-angular';
export MyPage {
constructor(platform: Platform) {
this.platform = platform;
}
exitApp(){
this.platform.exitApp();
}
}