I'm working on a project and i simply need make this type of navigation menu in my app main page.
But if i use png image to a card that getting auto zoom and getting ugly look. That is what i am talking about
This news icon png is 50px image. I want display this as small icon. I am not using ionic provided icon because they have very limited icon list. Therefor i used other icon. If i go with ionic icons how i can resize their icon as i want?
Here my codes
<ion-content padding id="myPage">
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-card color="secondary">
<img src="../../assets/imgs/News_50px.png" class="" alt="" />
<ion-card-content text-center>NEWS</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card>
<img src="../../assets/icon/icons8-handshake-96.png" class="" alt="" />
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
What i can do for make my app look likes above i mentioned app look and can i resize my card height and width as i want?
If you go with your png just use css.
For example:
ion-card img { width: 20%; height: 20%; }
For this apporach the images should have the same initial width and height, otherwise you need to do it with a custom class on each image and put it the size you need.
If you want to use ionic icons you can give them another size with the font-size, e.g 1.5em. Than you can check the size of the window and resize it in css. If width > 800 px, font-size: 1.8em and so on... (https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
Related
I have multiple apps where I’m using svgs not just as small icons, but also as background, as interactive buttons or as animations.
The problem that I’m having is that I’m not able to position correctly one svg as a background image. The background image is cut on the bottom of the screen.
I tried different variations of integrating the svg but none were successfull.
I have created a github example project
https://github.com/studentrk/svgPlacement
How can I fill the available space with the svg?
Any help would be appreciated.
<ion-content [fullscreen]="true">
<ion-button (click)="addSvg()">Add svg</ion-button>
<ion-list mode="ios" mode="md">
<ion-radio-group value="mode1" [(ngModel)]="mode">
<ion-list-header>
<ion-label>Change Mode</ion-label>
</ion-list-header>
<ion-item lines="none">
<ion-label>Mode 1</ion-label>
<ion-radio slot="start" value="mode1" mode="md"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label>Mode 2</ion-label>
<ion-radio slot="start" value="mode2" mode="md"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<div id="svgContainer">
<ion-icon id="svgIcon" src="./assets/balloon.svg"></ion-icon>
</div>
</ion-content>
#svgIcon {
height: 100%;
width: 100%;
}
#svgContainer {
height: 100%;
}
I have an ion-card in an ion-footer. It has an ion-textarea in it, as it will be used for a chat window. I am trying to place an icon beside the ion-card (an arrow) so a user can submit a message.
Whether I put the icon inside the ion-card, inside the ion-card-content, inside or outside the ion-footer, it just doesnt have the right positioning. If I put it inside the footer, it doesn't even show. If I put it outside the footer, it obviously rests on top or on the bottom of the footer.
<IonFooter style={{backgroundColor: 'white'}}>
<IonCard style={{width: '75%'}}>
<IonCardContent>
<IonTextarea
placeholder="Enter message here..."
value={text}
ionChange={e => setText(e.detail.value)}
/>
</IonCardContent>
</IonCard>
<IonIcon icon={arrowForwardSharp} size={"large"} color={"black"} />
</IonFooter>
Inside the footer (its below but you can't see it for some reason, even if i use a black icon)
Outside the footer (strangely places in a black box)
You can try by adding a grid inside you ionCard and adapt the number of col
If you want the icon separated from the textarea
<ion-footer>
<ion-card>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col><ion-textarea placeholder="Enter message here..."></ion-textarea></ion-col>
<ion-col>
<ion-item><ion-icon name="arrow-forward"></ion-icon></ion-item></ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-footer>
If you want the icon "inside" :
<ion-item>
<!-- <ion-label position="floating">Write Here</ion-label> -->
<ion-textarea></ion-textarea>
<ion-icon name="send" color="primary" slot="end"></ion-icon>
</ion-item>
I want the ion-card to have a specific size and the ion-card-content to fit the ion-card.
Happens that inside ion-card-content I have an image that doesn't fit the ion-card sizes (height more precisely).
Here is the code:
<ion-content>
<ion-row *ngFor="let card of cardData">
<ion-col>
<ion-card style="height: 150px;">
<ion-card-title>{{card.cardTitle}}</ion-card-title>
<ion-card-content >
<ion-img [src]="card.cardImageSrc"></ion-img>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
And this is the result
I don't want the images to be cropped. I want them to fit the card no matter the size of the card. Already tried a lot of solutions found online but no one seems to work, since ion-card-content is always bigger than the ion-card
Since you have set the height attribute on <ion-card> to 150px, then you have to set the height attribute on <ion-img> to a value less than 150px (i.e 100px, Since you also have the title inside the ion-card).
Your code will be like the following
<ion-content>
<ion-row *ngFor="let card of cardData">
<ion-col>
<ion-card style="height: 150px;">
<ion-card-title>{{card.cardTitle}}</ion-card-title>
<ion-card-content >
<ion-img [src]="card.cardImageSrc" style="height: 100px;"></ion-img>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I have an ionic clickable icon (svg) and I placed it in a button. I set the fill to clear because I only want that the point cursor appears. The icon is in a grid on a cell.
Without the button around it looks correctly like this
With the button around it looks like that
The row is defined in this way. I set no-padding because in the next row I have more icons and the padding should be minimal.
<ion-row no-padding>
<ion-col></ion-col>
<ion-col ion-item no-lines no-padding text-center (click)="cmbAButton.open()">
<ion-button icon-only fill="clear" >
<ion-icon class="big" src="/assets/{{aSelectedIcon}}.svg"></ion-icon>
</ion-button>
</ion-col>
<ion-col></ion-col>
</ion-row>
In scss I have
ion-icon {
&.big {
width: 40px;
height: 40px;
}
I am building IONIC app and made a card layout as below.
<ion-content padding>
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="/../../img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-row>
<ion-icon name="thumbs-up"></ion-icon>
</ion-row>
<ion-row>
<ion-icon name="thumbs-down"></ion-icon>
</ion-row>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
The card is splitted into three columns (as expected), how ever I am facing the below issue
The thumbs up and thumbs down icon are displaying but not taking the full available height . instead they are taking a fraction area of the column only. How can I make sure that the two icons take half the width of the Row of that specific column.
Any inputs on how to fix this please.
Okay so this is how you can solve both your problems, here's the code for your page:
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="./assets/img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-icon name="thumbs-up"></ion-icon>
<ion-icon name="thumbs-down"></ion-icon>
</ion-col>
</ion-row>
</ion-card>
And this is the css for your page
.col[col-2] {
display: grid;
ion-icon {
display: flex;
font-size: 2em;
align-self: center;
justify-self: center;
}
}
Let's go through the code:
For the image you'll need to add the path relative to your index.html file, since an Ionic app is simply an SPA (Single Page App) so every page is served as it was part of your index.html. The same works for images rendered though javascript files and CSS.
For your thumbs up buttons you first need to remove the rows from the HTML, they doesn't need to be inside of a row.
Then you can manipulate it with CSS, apply a display: grid to your col element with the col-2 attribute, if you want you can change it to a class or ID and use something like <ion-col col-2 class="thumbs-col">...</ion-col> and change the CSS selector to .thumbs-col instead of .col[col-2].
The display grid is enough to separate into 2 equal rows, but if by any reason it desn't separate this way just add grid-auto-flow: row; to your col selector.
For the icon i added a code so it can center the icon both vertically and horizontally with flexbox. For the size since the icon is not an image, but an SVG, you'll need to manipulate it's size with font-size and not height/width. If you change to a button with an icon, for an example, then you can use height/width.
Hope this helps.