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.
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.
I make modal page that like a alert.
I want modal page height set dynamically
but modal height fixed and made to scroll.
this is my code.
global.scss
.custom-modal-alert .modal-wrapper{
width: 70%;
min-height: 178px;
--max-height:1000px;
height: auto;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
What can I do for this problem....
You can achieve this by swapping out the <ion-content> tag in your modal page.
<div class="modal-container">
<!-- modal contents go here -->
</div>
then add this style to your global sass file:
.custom-modal-alert .modal-wrapper .ion-page {
position: relative;
display: contents;
}
NB. This won't work with an ion-content tag in your page component. The rest of the styles you have should work
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%);
}
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
I am using Ionic Framework to build an Android Application. I need to display horizontally scrollable cards. Each card will display a product image, product title, product price and a button. I tried using ion scroll in x-direction, but cards doesn't seem to scroll in x-direction.
I tried using this plugin, but it seems like it can be use only with ion-pane and i am using ion-content.
In the meanwhile, i found another solution -
<div class="cardHolder">
<ul>
<div>
<img ng-repeat="feature in featured track by $index" ng-src="{{feature.featured_image.source}}" class="examplePic" >
</div>
</div>
CSS
.cardHolder {
height: 200px;
width:100%;
padding: 8px;
margin: 6px;
}
ul {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.examplePic {
height: 150px;
width: auto;
border:1px solid black;
margin: 2px;
}
The issue with this solution is that, I am only able to retrieve the image and not the other details.
You should look into ionic's built-in ion-scroll. Your code would look something like this. Also checkout this example
<ion-scroll direction="x">`
....your scrollable content here...
</ion-scroll>
Also checkout this example