I have a page which shows list of images in a grid. Each picture has a constant height and width. When the user resizes the browser or loads the page, I want the number of images per row to be depending on the screen size. For larger screen sizes, the more images.
For now I tried this.
<ion-grid>
<ion-row>
<ion-col col-3 *ngFor="let product of products">
<ion-card>
<ion-card-content>
<div (click)="OpenProductDetails(product.ProductId)">
<img src="{{product.MainMediaUrl}}" style="height:200px; width:200px; margin:auto; margin-top:15px" />
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
Now on page load, it is loading correctly, but as I change the browser size or I make portrait to landscape, it is still the same and not responsive.
How can I fix this.
You could set breakpoints to your grid cols like this
<ion-col col-xs-3 col-sm-4 col-md-2 col-lg-2 col-xl-1 *ngFor="let product of products">
col-xs- sets col for min-width: 0px and forward.
col-sm- sets col for min-width: 576px and forward.
col-md- sets col for min-width: 768pxand forward.
col-lg- sets col for min-width: 992px and forward.
col-xl- sets col for min-width: 1200px and forward.
Knowing this, if you set a col-md- it'll set the same number to cols lg and xl. Just see what's better for your problem, if in larger displays the image breaks then you can set a smaller number of columns when in mddisplays or larger.
Hope this helps.
Related
I am using ionic slider to display 3 cards where each card takes around 90% of the screen width (so that the next one is visible slightly)
Here's how it looks
<ion-slides [options]="{ slidesPerView: 'auto'}">
<ion-slide>
test 1
</ion-slide>
<ion-slide>
test 2
</ion-slide>
<ion-slide>
test 3
</ion-slide>
</ion-slides>
The problem is that when I start dragging the slide and when I release it, it does not stay where I left it (e.g. between the slides), but moves the focus to the image which occupies the most of the screen. It is "sticky".
What I'd like to achieve is that whenever I grab the slide, it stays where it is when released, rather than moving left or right.
For example, I need it to stay like this, if the user left it:
Desired look
How can this be achieved?
Thank you!
But that's how ion-slides work, it tries to imitate the behavior of the native PagerView (in the case of android).
What you want is a simple horizontal scrollable area. You don't need ionic for that, it can be easily achieved using only web technology (css):
<style>
.slider {
display: -webkit-box;
overflow-x: scroll;
}
.slider .slider-item {
width: 90%;
margin-right: 20px;
}
</style>
<div class="slider">
<div class="slider-item">...</div>
<div class="slider-item">...</div>
<div class="slider-item">...</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 have a column with multiple divs inside it. How can I align the last div to the bottom of the column?
Example code:
<!-- language: lang-html -->
<ion-grid>
<ion-row>
<ion-col>
<div> some text at the top </div>
<div> more text at the top </div>
<div> text at the bottom </div> <!-- I want this to be at the bottom of the column-->
</ion-col>
</ion-row>
</ion-grid>
I didn't explain my question that well.
I had 2 columns with different heights in the same ion-row which was creating extra space on the shorter column.
I solved my issue by putting the desired bottom divs in a separate ion-row.
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 made a website that has a jquery slider with left and right arrows that move to the next slide (webpage). All of the content is contained in one webpage and uses hashes.
http://www.ilandeistudio.com
It needed to have different full screen backgrounds for each page (hash) so I used a CSS technique that puts full screen backgrounds in DIVs which I found here (CSS Technique 1)
http://css-tricks.com/perfect-full-page-background-image/
This works but the height of the image is running off the bottom of the screen and therefore adding vertical scrollbars and you can't see the whole background image. I don't mind distorting the backgrounds a little (they are all w1024px x h682px) I just want the whole image in the viewable area.
I haven't been able to get it to work with CSS, let me know if someone has a suggestion otherwise maybe someone could recommend a jquery solution; but I don't know how to make most of those jquery examples work inside the DIVs for the multiple hashes.
Here is the CSS I am using now:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
And here are examples of two of the slides
<div id="home" class="slide">
<img src="images/bg_home1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header">
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
</div>
<div class="content">
test content
</div>
<!--Content ends-->
</div>
</div>
</div>
<div id="about" class="slide">
<img src="images/bg_about1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<!--Header starts-->
<div class="header">
<!--Navigation starts-->
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
<!--Navigation ends-->
</div>
<!--Content starts-->
<div class="content">
test content 02
</div>
<!--Content ends-->
</div>
</div>
</div>
The code itself looks correct. One thing that you didn't include but I would make sure of is that the header and navigation you have listed are positioned absolutely on the page rather than floating left and using margins to position things. That will add space to the 100% of the page.
So the image itself is expanding to the height of the page and the heights of header and navigation are being added on top of that. Most likely that is the problem if you seem to scrolling the height of those objects.