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>
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>
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.
I've started a blank project with Ionic 3 and the default style is not applying to the buttons.
I'm using a default button with
<button ion-button>Prueba</button>
But I get this
Am I missing something?
UPDATE
Using
<ion-button block color="primary">Acceder</ion-button>
Fix the problem but I notice that is not using full width in the div than contains the button
<div padding>
<ion-button block color="primary">Acceder</ion-button>
</div>
Not sure where is the problem
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!