horizontally scroll table in Angular md-content

Question

In Angular 1.5 I have a table in an <md-content>. I dynamically add columns to the table, and at a certain point horizontal scrollbars appear. This is good.

But the bad part is that the new columns are not visible. How could I programmatically scroll my <md-content> horizontally so that new columns are visible?

Using angular-scroll-glue is a choice. You can attacth scroll-glue-right="glued" to your md-content and it shoulds work. I can make a plunker if this suit for you — troig
– troig, Commented Jan 17, 2017 at 11:40

troig · Accepted Answer · 2017-01-17 14:18:33Z

2

+50

As I post in a comment, here you have a working plunker using angular-scroll-glue directive.

The key here is attaching scroll-glue-right directive to your md-content.

<md-content scroll-glue-right>
  ...
</md-content>

See complete code here

EDIT: If you want to scroll programatically instead of automatically like in the first plunker, you can bind scroll-glue-right to a controller attribute. Example:

<md-content scroll-glue-right="glued">
...
</md-content>

When glued is set to true, scroll will be fired. Working plunker here

Hope it helps

edited Jan 17, 2017 at 14:18

answered Jan 17, 2017 at 12:14

troig

7,2424 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Garret Wilson Over a year ago

This seems to work nicely, thanks! One note: I see you named the module luegg.directives but I don't see any other directives there. Any reason why you didn't just name this module scroll-glue?

troig Over a year ago

Hi @Garret Wilson!glad to help and thanks for the bounty. I just follow the usage guide of the angularjs-sceoll-glue (need to import luegg.directives to use it). I think you can name your module whatever you want but you need to import the directive as luegg.directives.

Garret Wilson Over a year ago

Oh, sorry, I thought it was your directive! I'll give my feedback on the angular-scroll-glue project then.

adamdport · Accepted Answer · 2017-01-17 22:39:14Z

Have you looked into scrollLeft? You can get the position of the scrolled element, and then scroll the parent to that position:

container.scrollLeft = childToScrollTo.getBoundingClientRect().left;

You could certainly build this into a directive if you needed to, or you can just run something like this after you add a column. Here's a quick demo:

var scroll = function(){
  var container = document.getElementById('container');
  var childToScrollTo = document.getElementById('scrollto');
  
  container.scrollLeft = childToScrollTo.getBoundingClientRect().left;
}

#container{
  white-space: nowrap;
  overflow: auto;
  width: 400px;
}

.child{
  display:inline-block;
}

<button onclick="scroll()">scroll</button>
<div id="container">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child" id="scrollto">scroll here!</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

Collectives™ on Stack Overflow

horizontally scroll table in Angular md-content

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related