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?

Answer 1

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

Answer 2

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>