Using Angular ui-grid latest version (4.0.0) having 6 columns and it displays correctly on laptop/desktop(Big screens) but displays very badly in small screen devices(Mobile phones), data get cut with (...) and columns display one below the other. Anything to fix it?
We already using the columnDefs with column width in % but it was not coming, though, I have figured it out actually parent div was given 100% width so it's taking viewport width and adjust grid accordingly but when parent width removed its works!!!
Related
I have combination chart as displayed in the fiddle using highcharts
https://jsfiddle.net/u1p2ebk0/3/
but while displaying September month plots are not showing the custom icons on the chart really not sure why is this behavior and also when i click no 1m zoom custom icons are showing but on load also it should show the icons not sure what i am missing
All flags are not displayed because there is no place for them all. When you set series.flags.allowOverlapX property to true, all flags will be shown but they will overlap each other. You can try to reduce their size or alternatively modify the amount of setting data depending on rangeSelector selection or chart size.
Let me know in case of any implementation issues.
Demo:
https://jsfiddle.net/BlackLabel/rk95uL10/
API reference:
https://api.highcharts.com/highstock/series.flags.allowOverlapX
The text in my ui-grid cells are not sizing correctly. Sometimes it happens when switching tabs, then going back to the tab with the ui-grid. Cell width seems to change. Some grids show only one cell, then the issues happens and shows all cells like in the image, but with the ellipsis ... issue. Can be fixed sometimes by maximizing or minimizing the browser window.
uigrid fail
uigrid
I'm trying to add columns to a ng-grid but facing problem with the last column. Even I set the width of the last column, the component enlarge it to the end of the grid. So when I have more rows, a vertical scroll bar as well as an unnecessary horizontal scroll bar is added.
How can I avoid this?
I solved the problem upgrading to ui-grid. with the new version I have a better control of everything
I'm working with an angular strap dropdown and i want it to stay on screen when it is shown. problem described in the picture.
http://i.imgur.com/cznMsAw.gifv
The dropdown takes in an placement attribute which can be set to auto to help it stay on screen but it isn't good enough because it only calculates from the parent element not the screen width and height.
This can been seen in the code in the tooltip module
https://github.com/mgcrea/angular-strap/blob/master/dist/angular-strap.js#L1067
Line 4416 to 4454
does anyone have a solution to this problem.
I need to dynamically change the header row height of an ng grid, depending on which column headers need to be displayed. Some columns have a very long header and I want the column name to wrap so they don't need to be excessively wide. I also don't want a lot of blank space if I initially set a tall header height, but then don't need the space if those long column names aren't displayed.
The issue is I cannot get the headerRowHeight to dynamically change. It took some time to realize that I cannot even initialize headerRowHeight using a scope variable the same way as the other gridOptions (see line 23).
See plnkr
The reason this doesn't work is that ng-grid uses absolute positioning under the hood. Grid Options are only fired once, and then the heights are set in the html after that using style= on the html dom node. (THIS IS AWFUL!) They even set the style manually on all of the underlying header dom nodes.
The other avenue I thought of was trying to redraw the grid using ngGridLayoutPlugin. I played around with this for 30 minutes with no luck. You could try manually redrawing the page itself. It looks like ng-grid is not very good at redrawing the grid, and they've made optimizations specifically for updating data, but not the styles.
The 3.0 beta unstable release looks like they've made a lot of changes, and you'll be able to do what you're trying to do easier... however, it is not ready for production. See the header cell class conditionals in this example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass
I had a hell of a time trying to get ng-grid styling to do my bidding at my last job. At a certain point, we were ready to toss it because it was too restrictive. Good luck.
Use this in your CSS.
.ui-grid-header-cell-primary-focus {
line-height: 2.428571;
}