I would like to vertical align the content on each slide in the center of the screen. But it seems there is no way to style the css of the ion-slides in a way that my content is vertically aligned in the center.
I tried various ways, but none had an impact on the slides.
<ion-slide>
<h2>Date of Birth</h2>
<p>Please select</p>
<ion-item>
<ion-datetime formControlName="birthday" displayFormat="DD-
MM-YYYY" picker-format="DD-MM-YYYY" cancelText="Cancel"
doneText="Done" placeholder="Day-Month-Year">
</ion-datetime>
</ion-item>
</ion-slide>
And CSS i tried:
.slide-container {
vertical-align: center !important;
}
or..
.slides {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100%;
}
How can I overwrite the ion-slides css, so that the content of the slide is perfectly in the middle of the screen?
Make sure your ion-slides have enough height
ion-slide{ height: 80vh;}
I use 80vh with <ion-header>, but without <ion-header> you can use 100vh.
If you still want to make it middle you can use
ion-slide{
position: relative;
top:50%;
transform: translate(0,-50%);
}
Related
I have an ion-item with ion-avatar and ion-label with large text.
For showing full text in ion-label i added a class 'ion-text-nowrap' to ion-label.
It works fine.
But the problem is ion-avatar automatically placed to vertical center of ion-item.
I don't need to align avatar vertical align middle. I want that align left-top of ion-item. How can i do that?
This is my code:
<ion-item>
<ion-avatar slot="start">
<img [src]="img">
</ion-avatar>
<ion-label class="ion-text-nowrap">
<p>{{text}}</p>
</ion-label>
</ion-item>
There are no css properties to achieve this in Ionic.
But it is possible by overwriting the css of the ion-avatar and ion-label.
Change the position of the avatar to absolute and place it in the top corner of the item. Then adjust the label margin to place the text back where you want it.
ion-avatar{
position: absolute;
top: 0px;
left: 0px;
}
ion-label{
margin-left: // size needed
}
Example output:
I'm using Ionic 4 and using Tabs layout.
I have to design the tabs items like
For this, the tabs.page.html is like
<ion-tabs>
<ion-tab-bar slot="bottom" color="primary">
...
<!-- center button with round border -->
<ion-tab-button tab="ride" class="tab-btn-ride">
<ion-icon name="bicycle"></ion-icon>
<ion-label>Ride</ion-label>
</ion-tab-button>
...
</ion-tabs>
To make the button round, here is the css
.tab-btn-ride {
width: 4rem !important;
height: 5rem;
border-radius: 50% 50%;
box-shadow: 0 0 0 1.5pt #ff9823;
margin-bottom: 2rem;
max-width: 5rem;
z-index: 10;
border: 3px solid white;
}
This looks fine in the browser (above image) while development. But after generating apk, it looks like the below image in Android device. The upper part is clipped or hidden below the page view.
I tried increasing the z-index value but no luck.
The round image cut because of footer height. So resolved this issues as below
Increase footer height
Reduced round image size.
I am working on a simple app in Ionic.
I have a problem that the keyboard pushes my input field up and over another div while there is enough space for they keyboard. How do I fix this? I already looked around on the internet but wasn't able to find any solution to my problem.
This is what happens:
As you can see, the text is in the image and there is no reason for it being so high. There is more then enough space below it.
This is my code:
HTML:
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="login content">
<div class="logo-container">
<img src="assets/imgs/Mikos_logo.jpeg" class="logo-img">
</div>
<div class="center">
<p>Vul hier je naam in:</p>
<ion-item class="code-field">
<ion-input placeholder="naam" type="text" (keyup)="nameInput()" [(ngModel)]="name"></ion-input>
</ion-item>
</div>
</ion-content>
CSS:
page-login {
.login {
background-color: #EEEEEE;
}
.logo-container{
position: absolute;
width: 400px;
left: calc(50% - 400px / 2);
}
.logo-img{
display: block;
width: 100%;
height: auto;
}
.center{
position: absolute;
top: 40%;
width: 300px;
left: calc(50% - 300px / 2);
}
#media only screen and (max-width: 600px) {
/* For mobile phones: */
.logo-container{
position: absolute;
width: 300px;
left: calc(50% - 300px / 2);
}
}
}
What I have tried:
I have added the Ionic native keyboard and added this in my app module:
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
This unfortunately did not work.
Update:
Adding
.scroll-content {
padding-bottom: 0 !important;
}
is also not working.
This is a known bug of Ionic 3 and can be fixed by adding the following CSS style:
.scroll-content {
padding-bottom: 0 !important;
}
I have had similar issues and this piece of CSS fixed it.
When an input is focused, Ionic adds some padding to the bottom of the scroll-content class, to create room for the keyboard.
Update
Relative top positioning may cause the issue (as well).
This person's answer helped me"
https://stackoverflow.com/a/61337530/10661436
Basically just go to your AndroidManifest.xml file,
search for:
android:windowSoftInputMode=ABC
Replace "ABC" with adjustPan
Just add this to your config.xml and make sure you have your keyboard plugin installed.
<preference name="KeyboardResizeMode" value="ionic" />
On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?
Just use the edge attribute that comes along with fabs:
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.
Hope this helps.
Thanks to #Garrett and #Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:
<ion-content>
<div id="header">
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
And the scss file:
#header {
background-image: url('../assets/images/anonymous.jpg')!important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 25vh;
}
ion-fab {
position: relative;
}
ion-fab[bottom][edge] {
bottom: -21vh;
}
.fab {
margin-right: 3vw;
}
Here is what I could get to work.
This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.
This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.
<ion-content>
<div class="container"></div>
<div class="fab-conatainer">
<ion-fab class="fab">
<button ion-fab>
<ion-icon name="camera"></ion-icon>
</button>
</ion-fab>
</div>
<div class="contacts-container">
<ion-list>
<ion-item>
<ion-input placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Email"></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS
.container {
width: 100%;
background: #333;
height: 500px;
}
.fab-conatainer {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
z-index: 1;
margin-top: 28px;
}
.fab {
margin-right: 14px;
}
Is there a way to achieve multiline ellipsis text in ionic 2. I have a card view and need to restrict maximum 2 lines to be showed inside it with vertical center alignment. I tried webkit css option but it is not working. I saw similar questions asked by others but couldn't figure out an answer for it.
Below is my html code
<ion-content class="cards-bg light-gray">
<ion-list>
<ion-card *ngFor="let od of orderDetails” class="fade_logo">
<ion-card-content> {{od.description}} </ion-card-content>
</ion-card>
</ion-list>
</ion-content>
Here the order description is long text, I just need to show only 2 lines.
It depends on font size and line height but put this in your .scss file and also change the height: to get the best result.
ion-card-content {
display: block;
display: -webkit-box;
height: 60px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}