CODEWITHSUNDEEP
angular-material2
ethan
ethan

Reputation: 1971

Angular2 Material md-content alternate solution

For angular2 material project, the md-content is not available. There is no ETA when it's going to be available for use. Basically, I need a container with scrollable for overflow. What's the "material" way of doing this besides wrapper div and set overflow.

Upvotes: 4

Views: 3531

Answers (1)

Fan Jin
Fan Jin

Reputation: 2460

Angular2-drag-scroll is the library you are looking.

It is essentially a directive with overflow: scroll and other goodies

<style>
  .demo-one {
    height: 260px;
    background-color: #FFFFFF;
  }

  .demo-one img {
    height: 260px;
    width: 260px;
    margin-right: 10px;
  }
</style>

<div drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
  <img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
</div>

I'm applying "drag-scroll" to the div so everything in side of this div will be draggable and has the attribute overflow: scroll etc.

Setting "drag-scroll-y-disabled" to true will disable y-axis scrolling/dragging.

Setting "scrollbar-hidden" to true will hide the scroll bar(ugly).

Scroll Github page: https://github.com/bfwg/angular2-drag-scroll

Demo site: https://bfwg.github.io/angular2-drag-scroll/

Upvotes: 1

Related Questions