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
Related
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!!!
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 am using ng-grid when I drag the window the grid resize well. But when I click a button to make the window bigger,the grid does not resize.
UPDATE: Actually, the grid is resized. However, the row and column are not.
I notice in 3.x they have autoresize function. Unfortunately, I cannot update to 3.x version. Is there any way I can fix it?
$scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
$scope.gridOptions.$gridScope,
$scope.gridOptions.ngGrid
);
I used this code the rebuild the grid and it solve my problem.
Thanks for everyone's replay.
Please, see picture bolow:
I cannot get rid of white paddings/margins in combobox popup. I have two custom containers in designer called DropdownItem and DropdownItemSelected, Fisheye renderer type for ComboBox renderer. As you may see in combobox selected item is displayed just fine. However, in I cannot get combobox popup displayed without white paddings. I have actually used PopupContentPane to add blue border around popup, I also have border set to empty, all margins/paddings set to 0 for following UIIDs: PopupItem, PopupFocus, DropdownItem and DropdownItemSelected. PopupContentPane has also all paddings/margins set to 0. Also see my contants:
I went through source code and cannot find any other useful UIID I can style in order to remove these white paddings. Can someone help me with this?
Update:
Might be helpful - see below how popup looks like when PopupContentPane border sickness is set to 2px:
Update 2:
Almost there. After setting listItemGapInt constant to 0 I managed to remove gaps between list items. See screenshot below.
I still cannot find out how to remove 2 pixel gap on the right and don't know where it's coming from. Would appreciate any thoughts/ideas.
Update 3:
I eventually found where two pixels are coming from.
com.codename1.ui.ComboBox class, lines 289-290
289 int listW = Math.max(getWidth() , l.getPreferredW());
290 listW = Math.min(listW + getUIManager().getLookAndFeel().getVerticalScrollWidth(),
parentForm.getContentPane().getWidth());
In my particular case, listW=630px and in line 290 listW is recalculated as Math.min(630 + 2, 768), where 2px is width of vertical scroll.
As far as can say, scroll bar should be a part ComboBox popup.
I managed to remove unwanted gaps. As I mentioned in 'update 2', listItemGapInt should be set to 0 in order to remove horizontal gaps.
Vertical gap was related to scroll bar however it was not clear that it's a vertical scroll bar that creates that gap. After I set paddings to 0 for Scroll UIID, vertical gap has gone.
In regard to update 3, this is a bug but not because it should be in the container. The list is scrollable so this should be a part of the list however the call should be to l.getSideGap() and not to getVerticalScrollWidth().
This will allow you to hide that by setting the scroll bars to visible false etc. We'll fix that for the next update.
I've wasted too much time on this and am begging, begging, I tell you, the stackoverflow community for help!
I'm a new jqGrid user, and have my grid working as I want it to, but at the moment, cannot get a row to highlight in IE 7 as the mouse is hovered over it. Our shop is currently running IE7, so changing browsers/versions is not a possibility. Hover works great in Firefox, does not work in IE7.
I have googled endlessly for "jqgrid ie7 hover", "jquery ie7 hover", and any iteration of "ie7" and "hover", and "css" and all that.
I have tried so many variations of DOCTYPE declarations it ain't funny. I've tried reverse engineering the http://www.trirand.com/blog/jqgrid/jqgrid.html demo pages until my fingers are aching. Yes, the hover works on the demo pages. No it ain't working on my own page. I have tried manually passing in the ui hover CSS classes directly with different attributes and the !important flag just to see if I get anything. Nothing.
Now here is what does happen when I hover over a jqGrid row with IE7: The bottom and right borders of the table cells will change color, but the background color does not. So, I know the hover highlighting is working for the cell borders, but not for the cells or row itself.
As a diagnostic aid, I slapped in a javascript alert() to bang when I hovered over the table. It works at the table level, but does not ever fire if I set it to fire if I hover over a row or cell. I used the IE Developer Toolbar DOM parser to verify I'm calling it right. I'm wondering if jqGrid takes over that functionality, though.
Anyhow, folks, the short version is: Why can't I get row highlighting to work in IE7?
Help me Obi Wan Kenobi, you're my only hope!
I'll answer my own question. The problem was a conflict with a separate .css file. My page uses the 960 Grid System for layout control. One of the items used as part of the grid system is a "reset.css" which was conflicting with the jqGrid hover display in my app. I commented out the call to reset.css and the problem went away. Fwiw, I did not see any other adverse affects to the grid system by leaving out reset.css.