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.
Related
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 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.
I'm building an Ionic 2 app that has a <ion-list> with <ion-item>s with (click) events. On loading the page with the <ion-list> it takes a few seconds before the <ion-item> click events become active and tappable. Tapping the items has no effect until a couple of seconds after the page has loaded.
I have only a few items in the list, and have tried with the virtualScroll list but to no effect.
What could be the cause of this?
I've figured out a work around for this unresponsiveness. Instead of using an ion-item use a <div> tag with tappable and ion-item attributes set.
The code below shows the fix in place
<ion-list [virtualScroll]="news">
<div tappable ion-item *virtualItem="let n" text-wrap (click)="openNews(n)">
<ion-row>
<ion-col width-20>
<img *ngIf="n.thumbnail" [src]="n.thumbnail">
</ion-col>
<ion-col width-80 text-wrap>
<h2>{{n.post_title}}</h2>
<p [innerHTML]="n.post_excerpt"></p>
</ion-col>
</ion-row>
</div>
</ion-list>
I need make something like this example of boostrap grid system
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Please help me!!
Use wrap in ion-row
<ion-grid>
<ion-row wrap>
<ion-col col-12 col-md-6 col-lg-3>
</ion-col>
</ion-row>
</ion-grid>
I am trying to achieve the following with Twitter Bootstrap:
I would like to have a simple <input> field and a simple <button> on one single line or row in Twitter Bootstrap. They should cover the entire width of the column/parent container (ie be of the same width as span12). I do not want to give the button a fixed with - I want the button to be fluid width (width determined by the button text). The input field should use the remaining space left of the button.
Here is a fiddle: http://jsfiddle.net/MgcDU/3202/
The fiddle shows the button aligned to the right.
Now: how do I get the input field to extend to the very left edge of the parent container?
I would like to retain the responsiveness, of course.
Any ideas? I do prefer a non Javascript based solution!
Done
http://jsfiddle.net/MgcDU/3251/
Using approach from here:
http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/
<div class="container">
<div class="row">
<div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div>
</div>
<div class="row">
<div class="span12">
<div class="pull-right">
<form class="form-inline">
<button type="submit" class="btn" style="float:right;">Button</button>
<div style="overflow: hidden; padding-right: .3em;">
<input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" />
</div>
</form>
</div>
</div>
</div>
</div>
You could get the width of the button with jQuery, and get the width of the parent span12 then set the input width to be the difference of the two.
I don't think there is any other way if the button width has to be dynamic.