I have a problem with vertical scroll. Though in options I set it to auto (also checked always), and set columns best fit, vertical scroll doesn't appear so I get limited width size. How can I enable vertical scroll?
I managed it myself by setting ColumnAutoWidth option to False.
Related
I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.
This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.
Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.
I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:
Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.
Thoughts?
How you can know if there is a vertical scrollbar :
If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.
Using SMartGWT I created a TileGrid, and now I'm trying to set the Overflow parameter in a way such that if there is overflow the scrollbar appears only for the Horizontal navigation and not the vertical one.
There are basically 4 slots for the tiles and if I add a 5th one, only the scroll bar for vertical navigation is shown.
In other words I want that the overflow is inline
I already tried these possibilities, but no one works.
setOverflow(Overflow.AUTO)
setOverflow(Overflow.CLIP_V)
setOverflow(Overflow.CLIP_H)
setOverflow(Overflow.SCROLL)
I also tried with the CSS code
overflow-x: auto;
Any ideas?
Try to set the orientation for the TileGrid to vertical by
setOrientation(Orientation.VERTICAL);
With this, you will get all tiles in one line. Sometimes a small vertical scrollbar still appears because the horizontal scrollbar. In this case you should also play with the settings and sizes to see only a horizontal scrollbar.
I was facing the same problem here. The only solution I've found for now was:
1) Set the tilesPerLine property of TileGrid to a big value.
2) Set the orientation property of TileGrid to "horizontal".
How to remove the horizontal scroll bar of Dojo Datagrid? Even i remove scroll space for the scroll bar appears. How to eliminate?
You can overwrite the CSS for the dojoxGridScrollbox to have overflow-x:none, but its not recommended.
Alternatively, you could have one of the column widths be "auto" instead of fixed pixel. Assuming your grid is wider than the data you intend to display, this will typically remove the scrollbars.
How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.
I have a canvas containing a datagrid. I set horizontal and vertical scroll to 'off' for the canvas, and set both to 'auto' for the DG. This works until I have a larger number of columns in the DG (>=16), then the vertical scroll bar doesn't appear. Anyone seen this and, better yet, have an answer?
Found a simple solution, if not an answer. The outer container was specified with fixed height and width, and the inner DG was set to 100% height and width. Setting the DG height and width to fixed values a bit smaller than the outer container did the trick. Still, it seems "100%" should work.