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?
2 Answers
Answers 1
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>Answers 2
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
0 comments:
Post a Comment