Horizontal scrolling table in Angular md-content

Question

In Angular 1.5, I have a table in <md-content> . I dynamically add columns to the table, and at some point horizontal scrollbars appear. It's good.

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

Answer 1

As I post in a comment, here you have a working plunk using angular -scroll-clue .

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

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

See full code here

EDIT . If you want to scroll programmatically, and not automatically, as in the first plunker, you can bind scroll-glue-right to the controller attribute. Example:

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

When glued set to true , scrolling will start. Working plunker here

Hope this helps

Answer 2

Have you viewed scrollLeft ? You can get the position of the scrolled element, and then scroll the parent element to this position:

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

You could create this in a directive if you need it, or you can just run something like that after adding a column. Here is 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>