I have a list of media cards. At a time 6 cards are displayed and to view next set of media cards I need to swipe right/left. How can I do this using angular ngtouch.
This is what I have for html
<div class="media people-card-media col-xs-12" ng-repeat="item in heroes">
<div class="media-left ">
<div class="person-photo presence" >
<img class="media-object list__photo img-circle" ng-src="{{item.photo}}" />
</div>
</div>
<div class="media-body list__body">
<div class="people_name_title">
<h4 class="media-heading title">{{item.name}}</h4>
</div>
</div>
<div class="media-right media-middle contacts-chat-call flex-it-align-top">
<a style="margin-right: 10px;">
call
</a>
</div>
</div>
here is the plunker
http://plnkr.co/edit/XRyEwpVNXiaejojm8lEY?p=preview
any help appreciated
https://github.com/revolunet/angular-carousel solved my problem. You turn any ul li elements to carousel
Related
I am currently using bootstrap 4 for the cards. I would like to add a numbering beside my card. which is show in the image below.
I tried adding padding-top on the span text the same goes with the assigned col of the span text but the card beside it is adjusting as well. Can anyone help me with this one?
I want the numbering to be at the horizontal range of the card either at the top or at the middle, as you can see it's above the card.
<div class="container">
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-12">
<div class="card h-100" style="width: 15rem;">
<div>
<a class="fancybox" href="admin/files/Images/flutterfest.png">
<img class="card-img-top" src="admin/files/Images/flutterfest.png">
</a>
</div>
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
give column classes as col-sm-2 and col-sm-10. there are 12 columns max you can create in bootstrap. So you have given col-sm-12 to second div thats why it is going to next line
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-10">
am working on tile base interface design using angular2,Tile name and image click events are fetching details from db.Now iam trying to fetch details when click on article div.please check my code
<ng-container *ngFor="let item of itemdetails;">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="col-item">
<figure class="photo">
<a [routerLink]="['/productdetails',item.ItemID]">
<img [src]="item.ItemImage1" class="img-responsive center-block" alt="Product Image" />
</a>
</figure>
<div class="info">
<div class="row" style="margin:0px;">
<div class="ItemDetails ellipseArea">
<a [routerLink]="['/productdetails',item.ItemID]">
<span class="Subtext">{{item.ItemDescription}}</span>
</a>
</div>
</div>
</div>
</article>
</div> <!--col ends-->
</ng-container>
template
<article class="col-item" (click)="fetchDetails(item)">
component
fetchDetails( _item ) {
this._http.(...)
}
I want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same.
Here is my HTML:
<div class="engineering-section col-xs-12">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="row">
<div class="card-container">
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>`enter code here`
</div><!--end card_actions-->
</div><!--end mdl-cell-->
</div><!--end row-->
</div><!--end card-container-->
Remove custom styles of margin from card-section class. It will work
You have to follow these 3 rules :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
It should look like this :
<div class="container-fluid"><!--<div class="container">-->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
See this link for more information about the Bootstrap responsive design :
http://getbootstrap.com/css/
You are doing wrong here
<div class="card-section col-md-4">
Put card-section inside col-md-4
<div class="col-md-4">
<div class="card-section">
it can give you the space between 3 cols and you can style the content too
and remove margin: 20px; it's unnecessary now.
Fiddle example
I want to use the media bottom bootstrap component but the text is top aligned despite adding the media-bottom class. Is this component broken or something. Any clean workaround?
Thanks
fiddle: https://jsfiddle.net/2yrrf6zx/2/
HTML code:
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
You are putting the media-bottom on the image and not on the text. If you use the following HTML, it should work as expected:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body media-bottom">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
Fiddle
Hello i would like to know if it is possible to filter a section with a specific class ? here is my code
<section class="portfolio_masonry" >
<div class="row isotope_portfolio_container">
<div class="new col-sm-4 col-md-4">
<div class="portfolio_item">
<a href="images/portfolio/lenses.jpg" class="lightbox">
<img src="images/portfolio/lenses.jpg" alt="Community & Non-Profit" >
<div class="overlay">
<div class="desc">
<h4>Lenses to Their World</h4>
<span class="cross"></span>
</div>
</div>
</a>
</div>
</div>
and the list gose on i need to filter this to not show all images in the start of the section but just specific calss images? thank you in advance
Yes you can using ('.div').filter('.yourclass')