I would like to have my text in the middle of an image inside a navbar. I have this code but the text aligns horizontally with the circle image. Your help is greatly appreciated.
<ion-header>
<ion-navbar>
<div *ngIf="showHeaderInfo">
<ion-title>
<div style="background-color: #4989ff; color: whitesmoke;" >
<img class="circle-pic-header" style="margin-top: 5px; margin-left: 5px;" src="{{userInfo?.image}}" />
{{ userInfo?.firstName }} {{ userInfo?.lastName }}
</div>
</ion-title>
</div>
<ion-buttons end>
<button ion-button icon-only (click)="logOutHandler()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
You can Add CSS property on image to vertically align text at the center like this
Make sure that there is no display:block on image element
.circle-pic-header{vertical-align:middle}
You can find JSFiddle demo here
Related
Hello i want to show the full image in a specified height div and set it a a background to the div. What i ve tried so far crops the image and doesnt show the full height of the image. Any help?
HTML:
<div *ngIf="item.type==='P'" [ngStyle]="{'background-image': 'url(' + item.image_path + ')','background-repeat':'no-repeat',
'height':'400px','width':'100%','border-bottom-left-radius': '5px','border-bottom-right-radius': '10px'}">
<ion-row>
<ion-col col-4>
<div>
Some text
</div>
</ion-col>
<ion-col col-8>
<button ion-button round outline>
some button
</button>
</ion-col>
</ion-row><br>
<span style="background:none;float: left">
<button ion-button outline round padding color="light">
<h1>name</h1>
</button>
</span>
</div>
Check this out, you need to specify your size into your image tag
.image{
background: url('https://images.pexels.com/photos/219998/pexels-photo-219998.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
height: 250px;
width: 100%;
background-repeat: round;
}
<div class="image">
</div>
ok, it just needed a background-size: 200px 100px;
When I try to change ionic button styles on these components even by using !important or using new custom classes it doesn't change anything. Here is the code:
<ion-content padding>
<ion-list>
<button ion-button block class=" custbtnnew" (click)=" SelectImage()">
Select
</button>
<br>
<button style="margin-top:20px;" ion-button block class="custbtnnew" (click)="UploadImage()">
Upload
</button>
</ion-list>
<div *ngIf="images" class="group">
<ion-grid>
<ion-row>
<ion-col col-6 col-md-4 col-lg-3 col-xl-2 class="created_group" *ngFor="let image of images">
<div class="container">
<div class="imgs">
<img class="imgBg"
src="URL">
<button *ngIf="images" ion-button clear (click)="SetProfileImage(image)" class="imgBtn">
Set As Default
</button>
<button *ngIf="images" ion-button clear (click)="Delete(image)" class="imgBtn">
Delete Image
</button>
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
CSS
.custbtnnew {
border-radius: 40px !important;
background: -webkit-gradient(linear, left top, right top, from(#DD2476), to(#FF512F));
background: linear-gradient(to right, #DD2476, #FF512F);
}
What can cause such an issue and how can be it get changed?
you may need a page declaration around your .scss
page-home {
.custbtnnew {
border-radius: 40px !important;
background: -webkit-gradient(linear, left top, right top, from(#DD2476), to(#FF512F));
background: linear-gradient(to right, #DD2476, #FF512F);
}
}
I need to move the button into the same div of the price, but to be at the end of the card.
Here is my card script:
<ion-card class="offersCard">
<ion-card-header>
<b>Name: Ali</b>
<br />
<b>DOB: 1994</b>
</ion-card-header>
<ion-card-content>
<div>
<div class="floatLeft imgStyle">
<img src="" class="img-responsive">
</div>
<div class="floatRight">
Required Task
<br />
Encrypt Data
</div>
<div>
<!-- <h2>Price: {{data.selectedPrice}} $</h2> -->
<button class="btnMargin" ion-button color="danger" (click)="buyPolicy(data.offer_id)">Take</button>
</div>
</div>
<br/>
<div>
<div class="floatLeft">
<h2>Price: 40 $</h2>
</div>
</div>
</ion-card-content>
</ion-card>
The current behavior is like in the image below:
So I tried moving the button's div into the same level of the price's div, with adding floatRight class to it, but it was near of the price and not to the end of the card:
Price: 40 $
Take
And it's not even centered together at the same level:
I tried then to put them both inside the same div and move the class declaration into both elements:
<div>
<h2 class="floatLeft">Price: 40 $</h2>
<button class="btnMargin floatRight" ion-button color="danger" (click)="buyPolicy(data.offer_id)">Take</button>
</div>
And the result was the same.
Here is a stackblitz about it.
How can I place the button to the bottom right of the card and to be centered with the price div?
I would recomend to ban float from your layout vocabulary unless you explicitly want text to float around boxes. For layouts there are flexboxes and grids with good support by the browsers.
I removed the floating css classes and an unneccessary wrapping div-element from your code and added flex-box element styles like this:
<div style="display: flex; justify-content: space-between; align-items: center;">
<h2 >Price: 40 $</h2>
<button class="btnMargin" ion-button color="danger"
(click)="buyPolicy(data.offer_id)">Take</button>
</div>
Here is your updated stackblitz.
There is an excellent guide to flexbox at CSS-Tricks if you want to dig in.
You need
justify-content: space-between; to align them and
align-items: center; to center them vertically
get rid of flaot as mention in other answer
<div style="width: 100%;justify-content: space-between;align-items: center;">
<h2>Price: 40 $</h2>
<button ion-button color="danger" (click)="buyPolicy(data.offer_id)">Take</button>
</div>
demo https://stackblitz.com/edit/ionic-o4jme7?file=pages/home/home.html
here is flex-cheatsheet you can play with
In ionic we can add ion-navbar and ion-toolbar in ion-header but I want to ad some customized menu bar to my application in top of the ion-content for that I add ion row and add z-index and position CSS for that it works in browser but when it build that menu-bar change position it is not fixed in top. I guess that after I fixed the position user cannot scroll the ion-content when scrolling the position of the menu is changes. How can I add customize menu bar to the top of ion-content
this image shows the menu bar in gray color
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row style="position: fixed;height: 50px;background: #444444">
<button ion-button small>test btn</button>
</ion-row>
<ion-row *ngFor="let item of data" style="background: #eee;border: 1px solid #888;height: 40px">
{{item.name}} - {{item.id}}
</ion-row>
</ion-grid>
</ion-content>
you can add a ion-toolbar inside the ion-content tag just like you would in the header and it will work the same, you just need to add a position:fixed to the toolbar
<ion-toolbar style="position:fixed;">
<ion-buttons start>
<button ion-button icon-only color="royal">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-title>Send To...</ion-title>
<ion-buttons end>
<button ion-button icon-only color="royal">
<ion-icon name="person-add"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
I think you need this:
<ion-header>
<ion-navbar>
<ion-title>title</ion-title>
</ion-navbar>
<ion-grid style="position: fixed; height: 50px; background: #444444">
<ion-row>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
<ion-content style="top: 50px;">
</ion-content>
I have a page which simply looks like this:
<ion-navbar *navbar>
<ion-title>My List</ion-title>
</ion-navbar>
<ion-content class="has-header">
<ion-list>
<ion-item *ngFor="#item of items">
<ion-toolbar>
<ion-buttons end>
<button>Something</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-item>
</ion-list>
</ion-content>
Let says there are 100 items. I would like each item to take the full height. So you should not be able to see the next or previous item at all unless you scroll. I would like the height of every item to be the same which would be the size of ion-content I guess. How can I do this? I have tried playing around with height, min-height, positioning, flex, but have not been able to make it work?
You can use vh units in modern browsers. Support is pretty good.
ion-content {background: #f6f6b2;}
ion-content + ion-content {background: #b3f4b3;}
ion-content {display: block; height: 100vh;}
<ion-content class="has-header">
<ion-list>
<ion-item *ngFor="#item of items">
<ion-toolbar>
<ion-buttons end>
<button>Something</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-item>
</ion-list>
</ion-content>
<ion-content class="has-header">
<ion-list>
<ion-item *ngFor="#item of items">
<ion-toolbar>
<ion-buttons end>
<button>Something</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-item>
</ion-list>
</ion-content>