Why does DataGridList's scroller cut off the models that are placed at the right side?.

edited August 2014 in General
Hi, I have this problem I am using a DataGridList that renders several items but when the window is resized it's default scroller gets visible cutting off a little bit the items' visibility at the right side of the window. what I tried to do was declaring a style inside the scrollerOptions hash setting the scroller's right padding to 10% but it didn't help cause it made the items that were already cut off even less visible by cutting them even more, the scroller didn't touch the items any more but now there's a blank space (the just declared padding) that blocks them it is like the scroller's padding didn't affect the content of the DataGridList. Note: if i set the scroller's left padding to 10% instead of the right padding, the items at the left aren't cut like the ones right side, they are moved as desired. I don't understand how does the DataGridList work to fit the items in the scroller. Can please anyone help me to solve this?.

Image and video hosting by TinyPic


  • edited August 2014
  • I have a hack solution to this.

    In enyo/source/ui/data/VerticalDelegate.js, change the updateBounds function to this:
    updateBounds: function (list) {
    		list.boundsCache    = list.getBounds();
    		list.boundsCache.width = list.boundsCache.width - 15;
    		list._updatedBounds = enyo.perfNow();
    		list._updateBounds  = false;
    Pretty much just adding the -15 to the width.
  • Thanks a lot for the help, it works as I need but what if new enyo versions are released then I would have to check if this hack is still possible to do. Again thanks a lot for the help I will use it for sure.
  • Yeah if you update the enyo core you will have the put the hack back in.
    This should be marked as a bug to be fixed
  • Hi @chrisvanhooser‌, I opened a ticket (https://enyojs.atlassian.net/browse/ENYO-4065) to investigate a solution that will calculate a dynamic value, as appropriate, to account for the scrollbar width as the 15 pixels seems fairly platform-specific. Thanks for providing the workaround for now!
  • @aarontam‌ sweet thanks.
    Yeah the 15 px was for chrome, and that is all my application is running in. A dynamic solution would be awesome
  • That should be pretty easy, just get the containers offsetWidth and subtract the clientWidth. I am using that for quite a while and it seems to work great cross-platform.
  • Hi @inta‌, thanks for sharing your solution - that should work as long as there are no rounding errors (since offsetWidth and clientWidth are returned as integers) i.e. when zooming in the browser. To get around this, we might use getBoundingClientRect() instead. Also, we should probably take into account the width of the borders as clientWidth excludes these. In any case, we'll try to come up with something robust, but feel free to open a pull request with your fix if you'd like. :)
Sign In or Register to comment.