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)
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 am tring to show my grid centered on screen but it showing on right side
Here is my code
<ion-content class="ion-padding">
<h3 style="margin-left: 15px;margin-top: 30px;">Home</h3>
<div>
<ion-grid style="height: 100%">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="6" *ngFor="let x of data">
<ion-card class="card-img" (click)="detail()">
<img src="../../assets/img/demo.jpg" style="height: 180px; width: 150px;">
<div style="text-align: center;" class="boxe">
<ion-icon name="checkmark" class="tick" color="medium"></ion-icon>
<ion-icon name="close" class="cross" color="dark"></ion-icon>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
.scss
.card-img{
border-radius: 10px;
width: 150px;
}
.tick{
text-align:center;
font-size: 30px;
}
.cross{
text-align:center;
font-size: 30px;
}
As in image in need to centered the grid and remove top spaces between images
Try This : -
page.scss
.card-img{
border-radius: 10px;
img{
width: 100%;
}
}
Here is my html template of my image and header I want to align t text in side that image
<ion-slides *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">
<ion-slide *ngFor="let item of getData" (click)="openItem(item)">
<img src="{{item.jetpack_featured_media_url}}" class="new-collection"/>
<h4 [innerHTML]="item.title.rendered"></h4>
</ion-slide>
</ion-slides>
You can use ion-card
html
<ion-slides *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">
<ion-slide *ngFor="let item of getData" (click)="openItem(item)">
<ion-card class="myCard">
<img src="{{item.jetpack_featured_media_url}}" class="new-collection"/>
<div class="myOverlay">
<div class="card-title">{{ item.title.rendered }}</div>
<div class="card-subtitle">{{ some subtitle you like }}</div>
</div>
</ion-card>
</ion-slide>
</ion-slides>
And some styling
css
img{
width:100%;
height:100%;
}
.myCard{
position:relative;
}
.myOverlay{
width: 100%;
height: 40%;
padding-top:5%;
text-align: center;
position: absolute;
z-index: 99;
bottom: 20%;
opacity: 0.5;
color: white;
font-weight: bold;
background-color: black;
}
Working-demo
I am currently developing an app with ionic 3 and I experience one problem from the beginning.
The Statusbar on the startpage (ONLY on the startpage) looks transparent. Here‘s a screenshot:
But all the other pages look how they should look:
Why is that so and what can I do to get rid of this issue?
HTML of the startpage:
<ion-content>
<div class="head">
<div class="balance">
301 €
</div>
<div class="balancetext">
CURRENT BALANCE
</div>
<div class="menu">
<button class="addbutton" (click)="onNewIncome()">
<img src="./assets/imgs/plus.png"> INCOME
</button>
<div class="split"></div>
<button class="exbutton">
<img src="./assets/imgs/minus.png"> EXPENSE
</button>
</div>
</div>
</ion-content>
and necessary SCSS:
html, body{
width: 100%;
background-color: #f5f8fa;
}
.head{
background-image: url('../assets/imgs/pattern_1.png');
background-size: cover;
height: 15em;
box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
}
I'm trying to vertically align my text on my screen. I've read through the docs on how to do this. But I'm still not having any luck. This is my code:
<div class="row">
<div class="col col-center text-center">
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</div>
HTML
<div class="row">
<div class="col">
<div class="text-center">
<h5 style="text-align: center;">This text is in the center of the screen</h5>
</div>
</div>
</div>
This works on Ionic Framework 3.0.1:
HTML:
<ion-content padding>
<div>
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</ion-content>
SASS:
ion-content {
div {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
Try this solution:
1.Add new css styles:
.home .scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
margin-top: -50px; /* the height of the centered content */
text-align: center;
}
.home .scroll {
display: table-cell;
vertical-align: middle;
}
2.Apply home class to ion-view:
<ion-view class="home">
demo
How about specify the "height"?
Anyway, centralize your text in horizontal, you can also use align="center".
(To make it clear, I added the color to row and col.)
<div class="row" style="height: 900px; background-color: blue;">
<div class="col col-center" style="background-color: red;>
<h4 class="gray" align="center">This text is in the center of the screen</h4>
</div>
</div>