I have images stored in Google Cloud Storage and used in an Ionic / Angular app. The images are shown as a background of a div element. They're mostly showing ok but in some cases, the image is missing. And it's consistently specific images that are missing - not others - no matter how many times the pages are reloaded.
Right-clicking on the background image to get the background URL and then pasting that URL in the browser results in the image displaying fine.
The scss code contains the basics styling of the image and the background image URL is added inline within the HTML file.
item.scss
offer {
.card-image{
background-color:lightgray;
background-position:center;
background-size:cover;
height:10rem;
width:100%;
}
}
item.html
<ion-card>
<div class="card-image" [ngStyle]="{ 'background-image' : 'url(' + offer?.imageUrl + ')' }">
</div>
<ion-item text-wrap>
<h2 text-wrap>{{ offer?.name }}</h2>
<p>{{ offer?.provider }}</p>
</ion-item>
<!--
<ion-item>
<span item-left>18 min</span>
<span item-left>(2.6 mi)</span>
<button ion-button icon-left clear item-end>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
-->
</ion-card>
And here's what it looks like rendered with the middle item's image absent...
Ok, I think I see the problem. After a bit of head-scratching, it turns out that there was some error with escaping the URL of the background image. So any image with a space in its name was absent.
Solution: change the file names to avoid spaces or escape URL's. It's now working as expected!
Related
I have many ion-badge on the same line. Each badge contains an ion-icon and some text. When there are many ion-badge on the same line, the text doesn't show in order to display all the ion-badge.
The HTML is the following (there can be many more ion-badge) :
<ion-item>
<ion-badge slot="end" color="light">
<ion-icon src="theSourceHere.svg"></ion-icon>
Text
</ion-badge>
<ion-badge slot="end" color="light">
<ion-icon src="theSourceHere.svg"></ion-icon>
Text
</ion-badge>
</ion-item>
I have no CSS or SCSS applied other than the one from the ionic framework and here is the result. I have been looking at the CSS for a while, but I haven't found anything for the moment.
I am trying to allow the overflow-y so the user would only have to scroll through the badges.
Close the <ion-item> tag and check if that works
Hope this is what you are expecting
use ion-scroll and direction attribute.
PROBLEM:
I have set the slot property for the ion-tab-bar to "bottom", however the ion-tabs seem to position themselves inside an ion-card element and when scrolling through the ion-card content to read more, the tabs scroll with the content.
I have tried using CSS to make the ion-tabs position: fixed, but that stops the content scrolling altogether (Cannot read all of ion-card contents).
Does any one know a fix for this? Any help is appreciated, thanks.
BACKGROUND:
CLIP OF PROBLEM: https://streamable.com/m650o
about.page.html:
<ion-content>
<ion-card class="aboutcard">
<ion-img src="assets/pic1.jpg"></ion-img>
<ion-card-header>
<ion-card-title>About Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<ion-card-content>BOUTIQUE Immigration Lawyers of London have
‘years of specialist Legal experience at your disposal’
<br>
Established in 1998 as a niche human rights firm – we have a trusted record of excellent service. BOUTIQUE are
frequently recommended by a long list of happy clients.
We are passionate about our work and dedicated to achieving life-changing results.
<br>
OUR PROMISE
<br>
“If you come to BOUTIQUE, you will get the result you want.
If there is a way, we find it and do it for you.
If there is no way we tell you, and don’t waste your time.
Where there is a way, we will deliver.”
Lawrence Lupin – Founding Director
</ion-card-content>
</ion-card>
<ion-tabs slot="fixed">
<ion-tab-bar slot="bottom">
<ion-tab-button class="activeTab">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()" class="adjustHeight">
<ion-icon name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button (click)="contact()" class="adjustHeight">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
Update: Fixed this.
To fix you need to put the ion-tabs outside of the ion-content, and wrap it in an ion-toolbar.
This way the ion-tabs are separate from the content and by wrapping it in to an ion-toolbar you reduce the "click-zone" as ion-tabs "click-zone" takes up the whole page and can lead to other issues such as (click) events not firing.
Best of luck to whoever sees this.
css problem with ion-select that has a button inside a shadow root. I need the default value --padding-top:10px,--padding-end:8px,--padding-bottom:10px,--padding-start:16px for this, but it is a first element and assumes the value applied as shown below.
below image contains color box which is ion-select and unable to control size of this box.code for ion-select is below. Can someone help me?
<ion-col size="2" style="padding:0">
<div class="colorselect color_{{color.slice(1,7)}}">
<ion-select >
<ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" >{{optioncolor}}
</ion-select-option>
</ion-select>
</div>
</ion-col>
Try this one.Its works for me
ion-select{
--padding-top:12px !important;
--padding-end:12px !important;
--padding-bottom:12px !important;
--padding-start:20px !important;
}
Try this package for shadow-dom elements. Works perfectly fine.
Search for Shadow-DOM-inject-styles on NPM. It let's you style shadow elements
Its been two days I am searching for a solution to replace ion-tabs icons with png, I have found many answers in stack also but it's not working with ionic-4.
I have followed this answer from ransoing in this link
its working when using SVG and with black fills only. however I would like customized image with multicolor in png format.
the solution from ransoing on the link i provided was working. it was just my browser cache thats making the issue
you can use ionTabsDidChange event
<ion-tabs (ionTabsDidChange)="tabChange($event)">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<!--<ion-icon name="flash"></ion-icon>-->
<img src="../../assets/icon/tab/course_on#3x.png" *ngIf="selectTab==='tab1'">
<img src="../../assets/icon/tab/course_off#3x.png" *ngIf="selectTab!=='tab1'">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<!--<ion-icon name="apps"></ion-icon>-->
<img src="../../assets/icon/tab/record_on#3x.png" *ngIf="selectTab==='tab2'">
<img src="../../assets/icon/tab/record_off#3x.png" *ngIf="selectTab!=='tab2'">
<ion-label>Tab2</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
selectTab = 'tab1';
tabChange(e) {
this.selectTab = e.tab;
}
I'm a programmer trying to learn some css and I've already run into a stumbling block.
I have the following HTML:
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
<div class="span-8">
Box1
</div>
<div class="span-4">
Box2
</div>
<div class="span-4 last">
Box3
</div>
<div class="span-16 last">
Main content
</div>
</div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24 last">
Footer
</div>
</div>
In my css I have the following:
body {
background-color:#FFFFFF;
}
div.container {
background:url(/images/bck.jpg);
}
I just want to display an image for the background area for the container div but nothing shows up. If I remove the background section from the css and add background-color:#000000; then I see a black background for the container div.
What am I overlooking?
Most likely you are not specifying the correct path to the image:
background:url(images/bck.jpg);
Make sure that:
You are specifying the correct path
File name of the image is correct
The image file is present in the images folder
Note: As I answered a question today, see how to specify the path with ../.
Most likely the image path is wrong. Remember that the image must be specified relative to the location of your CSS file. Let us say that you have a folder named styles with your CSS files and you have a folder named images with your images. Then you may need to specify:
../images/bck.jpg
in order to access that image.
I find that using Firebug for Firefox, the Web Inspector for Safari, or the Developer tools for MSIE 8 helps me diagnose issues like this. Inspect your div.container element and see what path shows up for your image.
Of course, if you have access to your server logs you could also check those to find what image was requested.
I recently had a problem just like this in where a jpeg image refused to show, but only in MSIE. I had to open up the image in photoshop and use the "Save for Web" again then reupload it. I'm not certain what the glich was, perhaps it was saved in an incompatible jpeg variation or was corrupt in some way, but that worked for me.