This question might seem silly question. But I'm really stuck with it.
I am trying to create a carousel with above center title and below centered Description text. There are lot of example on google but I couldn't find anything appropriate.
I am using angular-material and there is no carousel implemented in angular-material till now.
there is awesome carousel in materializecss but when I am adding materialize in project lot of element CSS conflicting because of angular-material and materializecss.
then I decided to use some other directives like JK carousel it is not allowing me create text on image.
there is carousel in ui.bootstrap it also getting conflict with drop downs component.
Could anyone please tell me how can I achieve my requirement?
I have to use angular-material, there's no other choice. So any help using angular-material will be a great support.
I am currently using angular 3d carousel in my angular-material project. It has html slide version. You can build all your angular material classes in that slide html.
<carousel3d-slide ng-repeat="slide in app.slides2 track by $index" ng-style="{'background': slide.bg}">
<div style="padding: 20px; color: #fff">
<md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Large</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</carousel3d-slide>
I'm trying to create a grid of Angular-Material cards that behaves somewhat like a Bootstrap grid. Ideally, cards will be full-width for small screen widths and jump to two columns at larger breakpoints.
Demo with 2 cards
The problem is that A-M creates columns for each card. I haven't figured out how to specify the number of columns for each breakpoint.
Demo with 5 cards
Here's the basis of the markup I'm using, which takes the card layout from rows to columns at the first breakpoint:
<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
<div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
<md-card>
There's a similar question on SO already, but accepted answer is unsatisfactory as it uses custom CSS and the cards aren't fluid-width. I've found no other similar examples.
I suppose I could loop every two cards with Angular and create stacked sets, but that seems needlessly cumbersome. I have to think that Material provides for a better solution. Also, such solutions would leave whitespace in the page where cards vary in height. Material seems geared toward a Masonry-like flex layout, and I'd like to stick with that.
Thanks.
You can use the material Grid-List, it allows for custom col-spans and animates the changes when the width changes.
I adapted the sample from the site and added md-card in the contents. Make sure to add layout-fill on the md-card.
You can easily adapt the sample for your column count.
http://codepen.io/anon/pen/QypjWY
I also adapted your 5 card sample. You need to know the height of the cards in order to use the Grid-List, but you can easily achieve the 100% height on small screens. You can use ratios or fixed CSS heights for the rows and then it is your cards job to display the content in a flexible way.
<md-grid-list ng-app="app" layout-fill flex
md-cols-sm="1"
md-cols-md="2"
md-cols-gt-md="5"
md-row-height-sm="100%"
md-row-height="600px"
md-gutter="8px">
<md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
<md-card layout-fill>
http://jsfiddle.net/2afaok1n/34/
Edit:
If you are instead looking for some kind of staggered grid, then you have to add a library: angular-deckgrid, it just provides the grid layout, everything in the content is angular-material. Unlike angular-masonry this library doesn't have any dependencies. If you are not worried about adding jQuery and the like then you can also use angular-masonry.
<div ng-app="app" ng-controller="DeckController" flex layout="column">
<deckgrid class="deckgrid" flex source="data">
<md-card>
The important part for the deck layout is the CSS configuration. With this you configure the number of columns and their width. I have used a media query for the angular-material sm breakpoint to switch to single column layout.
.deckgrid::before {
content: '4 .column.column-1-4';
font-size: 0;
visibility: hidden;
}
.deckgrid .column {
float: left;
}
.deckgrid .column-1-4 {
width: 25%;
}
.deckgrid .column-1-1 {
width: 100%;
}
#media screen and (max-width: 960px) {
.deckgrid::before {
content: '1 .column.column-1-1';
}
}
http://jsfiddle.net/2afaok1n/39/
Edit 2:
There is also a masonry version which doesn't require jQuery and a simple directive to use it: angular-masonry-directive. Here is an example, it works similar to the other one.
http://jsfiddle.net/xjnp97ye/1/
if i understood your question right
Then use this code and replace the hello with anything you like
<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
<md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;">
hello
</md-grid-tile>
</md-grid-list>
If I understood the question right, this works like a charm:
<body ng-app="app" ng-cloak>
<div layout="column" layout-gt-sm="row" layout-wrap>
<div flex="25" flex-gt-sm="50" ng-repeat="i in [1,2, 3, 4, 5] track by $index">
<md-card>
<!-- You code-->
</md-card>
</div>
</div>
</body>
Plunker with multiple breakpoints : (resize the inner window, not the browser window)
http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview
The plunker has been updated to show cards with different height.
2 directives have been made, so the biggest height of all cards is kept in memory and this one is applied to all cards.
<div ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33">
<md-card>
<md-card-title >
<md-card-title-text >
<span class="md-headline">Demo Title {{i}}</span>
<span class="md-subhead">Demo Description</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
Check this example: http://codepen.io/ktn/pen/jqNBOe
I have a view in ionic which has an image at the top and a scrollable list of messages. I want the image to stay on the screen while the list can be scrolled. Here is my current code:
<ion-content scroll="false">
<img src="/myimage.png">
<ion-scroll direction="y" style="height: auto;" delegate-handle="postScroll">
<div class="list">
<a class="item item-avatar" ng-repeat="post in posts">
<img ng-src="myimage.png">
<h2>{{post.title}}</h2>
<p>{{post.content}}</p>
</a>
</div>
</ion-scroll>
</ion-content>
This works pretty well, i.e. the scroll does work and the image stays in place. But I am having trouble setting the height. If I have 100 posts, for example, I can only see 2-3 since the height container is not nearly large enough. Am I doing this correctly? How can I set a variable height for the number of posts? The user can add posts dynamically so this height needs to be able to change.
I leave these codepen which will help you!
<ion-scroll direction="x" zooming="false" delegate-handle="horizontal2" horizontal-scroll-fix="mainScroll">
example 1
example 2
I'm looking for a Angular Carousel there is working with Bootstrap divs
I want it to shift between Divs, and I get the next div in center when clicking next or previous.
Bootstrap exsampel til wrap with carousel:
<div class="row">
<!-- Carousel start -->
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 1
</div>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 2
</div>
</div>
</div>
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 3
</div>
</div>
</div>
<!-- Carousel end --></div>
What possibilities do I have?
your question is a little confused to me. I understood your question but the code show something different. I will try to answer you the question with several alternatives. If you could be more specific with your problem I will help you quickly.
First, there are several carousel for AngularJS. There are single libraries that creates carousel, and others like ui-bootstrap(angular-ui) and AngularStrap that fit much better with Twitter Bootstrap. If you want to use AngularJS with TB, I recommend you ui-bootstrap. I have worked several times with the library and never let me down.
So, creating the carousel with ui-bootstrap we have several alternatives. First, to place the content of your divs in the center you have not use the grid system obligatory. You can use a single row and center the elements with text-align, margin:0 auto, flex model or others techniques. In this case check the next plunk:
http://plnkr.co/edit/XmzaJx5mXddLQ4S1k7BV
If you want to create each div with columns of the grid system, like your code shown, you have to shift the columns with .col-md-offset-x, leaving the same space at the sides. Check the plunk.
http://plnkr.co/edit/ihpwrWC0p64eO1jiddl2
I hope that my answer help you at least a little, If your question is another please, let me know.
I have been trying (unsuccessfully) for the past two days to use Masonry in an app. My app uses AngularJS and Bootstrap. I need to display images in Bootstrap panels. The images will be dynamically loaded. Each panel will be 200px in size. I want the panels to get added left-to-right with a maximum of four columns. There is a demo on the official angular-masonry site that is similar to what I'm trying to do. They do not use panels though.
When my app runs, my panels always load vertically. There are no columns. Just one single column basically. I can't figure out why. I've created a JSFiddle here. The setup for the masonry stuff is pretty simple. It looks like this:
<masonry>
<div class="masonry-brick panel panel-default" ng-repeat="item in items">
<div class="panel-heading">
<h3 class="panel-title">{{item.title}}</h3>
</div>
<div class="panel-body">
<img ng-src="{{ item.imageUrl }}" alt="A masonry brick">
</div>
</div>
</masonry>
Can someone please tell me what I'm doing wrong? I worked all weekend on this. Thank you!