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;
Related
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 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
I need to create ion-card as shown below. I have tried many ways. But no luck yet. Any clue?
Note: It has 2 images. top one and small book cover.
Here is the sample of stackblitz
This is what I need:
.html
<ion-card class="card-margin">
<img class="contentPicture" [src]="data?.image" />
<ion-card-content>
<ion-item class="book-cover">
<ion-thumbnail item-left class="thumbnail">
<img [src]="data?.image2">
</ion-thumbnail>
</ion-item>
<ion-item class="book-details">
<h2>From book:
<span>My book</span>
</h2>
<h2>Publisher:
<span>My publisher</span>
</h2>
</ion-item>
</ion-card-content>
</ion-card>
My attempt can be found here.
Set styles in .book-cover class:
.book-cover{
top: -50px;
z-index: 2;
background: transparent;
}
Note: You may have to edit the image's alpha to remove the whitespace in the image itself if you have any.
For the name section, I suggest using ion-row and ion-col instead of ion-item as the latter takes up the entire row.
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col col-2 class="book-cover">
<ion-thumbnail item-left class="thumbnail">
<img [src]="data?.image2">
</ion-thumbnail>
</ion-col>
<ion-col class="book-details">
<h2>From book:
<span>My book</span>
</h2>
<h2>Publisher:
<span>My publisher</span>
</h2>
</ion-col>
</ion-row>
<ion-grid>
</ion-card-content>
Use position: relative to the main image and position: absolute to the book image here I did sample code
.bg-image {
position: relative;
}
.book {
position: absolute;
top: 250px;
}
.text {
position: absolute;
left: 180px;
}
<div class="bg-image">
<img src="https://i.imgur.com/U4Oadyu.png">
</div>
<div class="book">
<img src="https://i.imgur.com/r7uK5St.jpg">
</div>
<div class="text">
<p>Text Here</p>
</div>
I'm creating a chat and my problem is that the div that has the messages inside it I put a scroll, but I can not keep it under everything.
This is the view code and styles:
<ion-grid>
<ion-row>
<ion-col col-12>
<button ion-button block color="success" style="text-transform: none" (click)="seeMembers()">See members</button>
</ion-col>
<ion-col col-12 class="div_chat" #div_theme>
<ion-list insert>
<button ion-item>
<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</button>
</ion-list>
<h3 *ngIf="themeDB == false" text-center><strong>There are no new Topics</strong></h3>
</ion-col>
</ion-row>
</ion-grid>
This is my stylesheet
page-see-theme{
.div_chat{
width: 100%;
height: 300px;
overflow-y: auto;
}
}
Any idea is very useful, thanks for your help
codepen
<ion-content>
<ion-slide-box class="my-slide-box">
<ion-slide>cat</ion-slide>
<ion-slide>dog</ion-slide>
<ion-slide>rat</ion-slide>
</ion-slide-box>
<div class="tabs" style="height:auto;">
<div class="row"><div class="col" style="padding: 0">
<button class="button button-block button-positive">
</button>
</div>
</div>
</div>
</ion-content>
How can I make my-slide-box extend only until the tabs?
You can use css calc for calculating the height of .my-slide-box.
codepen
.my-slide-box {
height: calc(100% - 77px); // 77px is the height of tabs
background: green;
}