I am new to Ionic framework, I want to resize the image. The image should become small and also the image should be displayed in the center of the page using ionic.
Below is my html code:
<ion-header>
</ion-header>
<ion-content padding>
<h2></h2>
<img src='assets/img/logo.png'>
<ion-chip color="secondary">
<ion-label color="#16B966">SEND RESET LINK</ion-label>
</ion-chip>
<div>
<span class="input-label">EMAIL</span>
<input type="text" placeholder="asdfjkl#panini.com">
</div>
<ion-card-content>
<p>Enter the email address associated with your account, and we'll email
a link to reset your password</p>
</ion-card-content>
</ion-content>
Use the following in HTML:
<img class="displayed" height="150 px" width="150 px" src="img/Logo.png">
and use the following in style.css:
.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
The more responsive answear is the package Image Resizer. It works fine, if you don´t use Rxjs. There are some dependency errors.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How to center an element horizontally and vertically
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I need to vertically centre the ion-menu contents so that it is easier to access from a UX perspective. I am not sure of the best way to do it.
This is the ionic starter project code, which was set up by ionic start myProjectName sidemenu.
<ion-content>
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-subtitle>Get Started</ion-card-subtitle>
<ion-card-title>Welcome to Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
</ion-card-content>
</ion-card>
<ion-list lines="none">
<ion-list-header>
<ion-label>Resources</ion-label>
</ion-list-header>
<ion-item href="https://ionicframework.com/docs/">
<ion-icon slot="start" color="medium" name="book"></ion-icon>
<ion-label>Ionic Documentation</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/building/scaffolding">
<ion-icon slot="start" color="medium" name="build"></ion-icon>
<ion-label>Scaffold Out Your App</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/layout/structure">
<ion-icon slot="start" color="medium" name="grid"></ion-icon>
<ion-label>Change Your App Layout</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/theming/basics">
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
<ion-label>Theme Your App</ion-label>
</ion-item>
</ion-list>
</ion-content>
So I am trying to do something like below.
Edit:
Ionic component directives already use flex. I'm seeking a solution specific (preserving the responsiveness) to Ionic 4 where an ion-menu is nested in an ion-list inside an ion-content directive. None of the answers provided in the SO links is applicable to my question.
Ionic give API for fix menu bar in left and right option only. If you want to make like the above image you can use your own css like 'margin-top: 80px'
You can use either a grid layout or a flex layout to achieve this. Since you have elements in only one dimension, horizontal, flex would be an ideal option. Try the below code
.menu {
height: 500px;
width: 250px;
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
}
.item {
padding: 1em;
border-bottom: 1px solid #ddd;
width: 100%;
}
<div class="menu">
<div class="item">
Home
</div>
<div class="item">
About
</div>
</div>
I want to scroll my ion-card component horizontally but it's not working that way. I've tried every resource on the internet but it's not scrolling horizontally.
Here is my code.
<ion-scroll scrollX="true" style="width:100% ; height:400px">
<ion-card nowrap *ngFor="let id of mydata" >
<img src="assets/imgs/arpit.jpg"/>
<ion-card-content>
<ion-card-title>
{{id.name}}
</ion-card-title>
<p>
{{id.regular_price}}
</p>
</ion-card-content>
</ion-card>
</ion-scroll>
The output I am getting is like the image below.
Try adding this styles is easy to do link
I'm trying to create a card in my ionic 2 application, like this example from the documentation:
So I wrote this:
<ion-content padding>
<ion-card *ngFor="let item of myItems">
<ion-item id="card-header">
<ion-avatar item-start>
<img src="image_url" >
</ion-avatar>
<h2>Person name</h2>
<p>99/99/9999</p>
</ion-item>
<ion-card-content>
My content
</ion-card-content>
</ion-card>
</ion-content>
But what I'm getting is this:
As you can see the avatar is positioned on a full line, not on the same line as the person name and other line. Why my avatar icon is not beeing shown on the left side of the line?
I put two images side by side on one page under the header as col-50. The issue is I want both images the full 50% width without any padding around any edges. I can't seem to figure it out with CSS
<div class="col col-50 row-no-padding">
<img src="img/facebook.jpg" style="width:100%; display: inline-block">
</div>
<div class="col col-50 row-no-padding">
<img src="img/twitter.jpg" style="width:100%; display: inline-block">
</div>
The above worked in my browser (ionic serve) but did not work on my device.
the problem is images are considered to be inline, as a result any white space is considered as space, try this:
<!-- both images should be in-line to have it working -->
<img style="width:50%; display: inline-block" src="the_image_source"/>
<img style="width:50%; display: inline-block;" src="the_image_source/>
you can also isolate the css if you wish
img{
style: inline-block;
width: 50%;
}
You could just use :
no-padding
to the col div
<ion-row>
<ion-col col-6 no-padding></ion-col>
<ion-col col-6 no-padding></ion-col>
</ion-row>
See Ionic Documentation for Grid
Hope this helps.
I have an ionic card. And there is only once card. It is big. But is is not scrollable. When I change the orientation to landscape half of the card will be hidden, and there is no way to scroll it.
<ion-content ng-controller="VideoCController">
<ion-list>
<div class="inset item-text-wrap">
<ion-item>
<h2>{{video.video_title}}</h2>
</ion-item>
<ion-item>
<div class="video-container">
<iframe ng-src="{{getIframeSrc(video.yt_id)}}" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
</ion-item>
<ion-item>
<h3>Lenght {{video.yt_length * 1000 | date:'mm:ss'}}</h3>
</ion-item>
<ion-item>
<p>{{video.description | htmlToPlaintext}}</p>
</ion-item>
</div>
Go to below to know more about how to make ionic scrollable, i haven't tried it but assuming that's the way to achieve scroll.
http://ionicframework.com/docs/api/directive/ionContent/
Let me know if you succeed.
Thanks
This answer is for general case of ionic-card scroll scenario. In Ionic versions below v4, we could use,
<ion-scroll scrollY="true">--content--</ion-scroll>.
But IonScroll is removed in Ionic v4. Therefore we have to use
<ion-card scrollY="true">--content--</ion-card>
like this.