Hope I'm not bothering the plugin creator with a stupid question.
I created a CodePen to test scrollify for my website but occasionally (1 out of 4 times) the scroll snaps between two sections and then, if I scroll again, it keeps the error going. I don't know why, but refreshing the page makes it work.
The option i'm using are:
$.scrollify({
section : "section.cat-section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1400,
offset : 0,
scrollbars: true,
setHeights: false,
overflowScroll: true,
touchScroll:true,
});
Link to the CodePen
Can anybody help me on this?
Regarding free-jqgrid 4.9.2, does it automatically handle column width? No, then what's the proper way to handle this?
1) VIN & Year columns contain too much free spaces
2) Trim contains few records that are too long to fit into column's width (Such as 1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)
Also, does jqGrid have true/false "word wrap" setting somewhere?
Demo is found at link removed
Auto-width adjustment exist in free jqGrid starting with 4.8 version. Free jqGrid still not handle the width of all columns automatically. One need add some additional properties in colModel for the columns which width should be set based on the width on the most long content and to set some additional options.
Your current code uses width: 190 for the column 'Vin' and don't specifies any width property for any other columns, so default value width: 150 will be used. Additionally you use width: 1022 option of jqGrid and wrong option autoWidth: true (instead of autowidth: true) which will be ignored. It means that the width of the div (bDiv or body div) over the grid will be set to 1022px and the user can use horizontal scrollbar to see all columns.
I would recommend you to read the wiki article. You can add autoResizable: true property to some specific columns or to use cmTemplate: { autoResizable: true } to add the property in all columns. As the result the content of every cell of the grid will be wrapped in <span class="ui-jqgrid-cell-wrapper">...</span>. It allows free jqGrid to get the exact width of content for all cells of the column and then calculate the max from the values. So the user can double-click on the column resizer (between the columns) to set the width to the best value. During the width calculation jqGrid the width of the column header with the width of sorting icon additionally to the width of the grid cells of the column. One can use autoResizing: { compact: true } option to reduce the width of the columns which don't have visible sorting icon. The last common option is autoresizeOnLoad: true which I would recommend you to use. It will set the width of the columns having autoResizable: true property to the best value.
So I would recommend you to add the following option to your grid:
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
After that the width of column will looks much better.
If you prefer to wrap the text of some columns if it is too long then you can use CSS settings described in the old answer and set maxColWidth property of autoResizing of the column (in colModel) or global setting maxColWidth of autoResizing option of the grid to the max width of the column. More long text will be wrapped.
When the datatype is Date, the kendo grid uses a kendo datepicker with dropdown calendar for the column.
The datepicker's dropdown calendar usually aligns itself flush with the left edge of the input box. If there isn't room for that, it is moved to the left, but not quite enough. This presents a problem when the rightmost column in the grid is a Date, and the grid is occupying 100% of the width available on the screen: the Saturday column in the dropdown calendar gets "cut off". See pic attached.
Is it possible to tell the calendar dropdown (for a particular column) to align itself flush with the right edge of the text input?
I know that bug. Your datepicker animation container is hidden under right scrollbar. If you set body overflow to hidden, you will not have a scrollbars and calendar will fit and touch right border of screen, like in this example: http://dojo.telerik.com/UCOhA
However if you can't turn off the body scrollbars you need to set calendar position manually dirty way like this:
$("#piker").kendoDatePicker({
open: function(e) {
//setTimeout to let kendo make k-animation-container element at first open
setTimeout(function(){
var animationContainer = $("#" + e.sender.element.attr("id") + "_dateview").parent();
var left = e.sender.element.offset().left + e.sender.element.closest('.k-datepicker').width() - animationContainer.width();
animationContainer.css('left', left);
});
},
//turnoff the animation to avoid strange visual effects
animation: {
open: {
duration: 0
}
}
});
Running example: http://dojo.telerik.com/Imiqa/2
I am hoping that a JqGrid occupies all the width it is given, and it auto shrinks and grows depending on the width of browser viewport. I am hoping to see the horizontal scroll bar as late as possible when the browser viewport shrinks.
I am playing with autowidth and shrinkToFit and combinations of them, but no success.
Am I doing it in wrong place?
Thanks and regards.
I do this on my apps with jQGrid. Here are some of my grid settings:
autowidth: true,
height: '100%',
shrinkToFit: false,
Below the creation of my grid, I use the window.resize function of jQuery:
$(window).resize(function () {
$gridName.jqGrid('setGridHeight', $(window).height() - 160);
$gridName.jqGrid('setGridWidth', $(window).width() - 210);
});
I subtract - 210 from the window's width to account for a left content area that is 210px wide.
I subtract - 160 from the window's height to account for a header content area that is 160px high.
There seems to be a bug in jqgrid, where one can not resize the last column.
This seems to be a quite old issue raised in 2009. I had a look and the latest jqGrid sample seems to have this issue...
What I found however was that last column can be dragged to resize the grid itself.
See here Go to section what is new in 3.6.
Any pointers if this is already fixed.
Seems I found a solution.
Resizing of the last column can be done only within the area of the header wrapper (div.ui-jqgrid-hbox). In the outer space resizing process losing focus.
Because of existing some padding-right area with default 20 pixels, increasing the size can be done in this small part only.
In addition, we need to temporarily cancel table wrapper influence, because he also cause to stop resizing process.
Here is my solution. I assume, that your table wrapper id is gbox_DataTable_u:
1:
CSS: define new wide padding-right area:
.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 10000px;}
2:
Append 2 events to your grid:
resizeStart:function(event, index){ $('#gbox_DataTable_u').width($('#gbox_DataTable_u').outerWidth() + 10000);}
resizeStop: function(width, index) {$('#gbox_DataTable_u').width($('#DataTable_u').outerWidth());}
Example of working table: http://www.design.atplogic.co.il/aman/philips/users.htm#
I found that the best way is to add an empty unresizable column in the end of the grid.
I'm just doing it manually, by extending the colModel right before the execution of jqgrid constructor. Only problem being - I wasn't able to make it not draggable so far.
Here's an example:
colModel.push({align: "left", editable: false, hidden: false, index: "ghostCol", label: " ", name: "ghostCol", resizable: false, sortable: false, type: "text", width: 50});
Hope this helps.
It is resizing fine for me as well, although you have to resize from the right on the "RTL Support" example, which seems to make sense.
Also be aware that if you are using Chrome, there is a jqGrid bug that causes horizontal scroll bars to appear - see jqgrid-does-not-render-correctly-in-chrome-chrome-frame. This issue has since been resolved, but the demo page has not been updated yet. And it certainly gives the appearance of the last column's resizing not working because you have to scroll all the way over to the right before you can resize the last column.
I have tried to resize the last column with resizeStop, i do some trick like the other guy said. hope it help.
resizeStop(width, index) { var amGrid = $("#jsonmap"), colModel =
$("#jsonmap").jqGrid('getGridParam','colModel'); var oW =
$oldWidths[index]; var cW = colModel[index+1].width+
downCalSize(oW,width); $oldWidths[index+1] = cW; $oldWidths[index] =
width;
$('.ui-jqgrid-labels > th:eq('+(index+1)+')').css('width',cW);
$('#jsonmap .jqgfirstrow > td:eq('+(index+1)+')').css('width',cW);
var w = amGrid.jqGrid('getGridParam', 'width');
$('.ui-jqgrid-htable').css("width",w);
$('.ui-jqgrid-btable').css("width",w); }
i still looking for a common way, can do on more tables in one page and don't affect to each other.
After 2 days of struggling...I finally found a way to work around.
It seems that jqGrid calculates the resizing object in the dragMove event, where it uses passed event object to get the position of mouse and calculates the new width of resizing column. However when dragging exceeds the grid's boundry, the dragMove event stop shooting...
So my work around is simply modifying jqGrid to calculates resizing object again in the dragEnd event. Here's the modified code
first find the dragEnd event.
...
dragEnd: function(e) { // add a new input parameter
this.hDiv.style.cursor = "default";
if(this.resizing) {
this.dragMove(e); // call dragMove event to calculate resize object
...
then find the mouseup event where dragEvent is triggerd...
...
$(document).mouseup(function (e) { // get the event object
if(grid.resizing) { grid.dragEnd(e); return false;}// pass event to dragEnv
return true;
});
...
Then columns should be able to resize to wherever mouse points.
Hope this would help.