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.
Related
I'm using 3 Ionicons side by side:
<ion-icon name="videocam-outline"></ion-icon>
<ion-icon name="attach"></ion-icon>
<ion-icon name="information-circle-outline"></ion-icon>
As the picture below shows, the first icon looks lighter than the other ones.
Is it something that I can adjust?
By adding the -webkit-text-stroke: desired pixels
you can change the stroke of the icons.
Hope this is what you are looking for
<ion-icon style="-webkit-text-stroke: 1px;" name="add"></ion-icon>
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.
I have a group of Ionic Radio button that is appearing as checkboxes on mobile. I am trying to make it like a circle using css but it is not working I need on all screens circled radio buttons. attaching reference image please have a look
reference site
<ion-list name="test" radio-group [(ngModel)]="ionic-radio">
<ion-item>
<ion-radio class="radio radio-inline radio-gray" value="3" checked></ion-radio>
<ion-radio value="2"></ion-radio>
<ion-radio value="1"></ion-radio>
</ion-item>
</ion-list>
CSS
used from reference site
Found the answer here
Get the os mode type
and add mode attribute as needed
no css no nothing easy steps..
<ion-radio mode="md" value="1"></ion-radio>
I am trying to create a live comment feed that constantly updates with new comments. I want to limit the size of the comments area and would like the comments to disappear from the DOM once a certain max. number of comments is reached.
For example, where the lowest comments is the newest and the first comment in the stack is no longer fully visible :
<div class="liveComments" scroll="true" text-wrap>
<ion-row class="liveComment" *ngFor="let cm of comments;" >
<ion-col col-2 col-md-2><img src="https://website.com/uploads/user/avatar/49420/shades.jpg" class="liveProfile"/></ion-col>
<ion-col col-3 col-md-3 class="usernameLiveComment"> {{username}}</ion-col>
<ion-col col-7 col-md-7> <span>{{cm.comment}} </span> </ion-col>
</ion-row>
<ion-row align="center">
<ion-col col-12 col-md-12><img src="assets/imgs/spinner.gif" width="15%" align="center" /></ion-col>
</ion-row>
</div>
Use an array of comments and push/slice/pop entries. The binding does the job for you.
Offtopic: Make a fancy animation with :enter and :leave
Alternativly you can use a virtual-scroll list so the dom manipulation is done by the ionic magic
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!