I resized my page within ui-grid with this code:
$scope.gridApi.core.handleWindowResize();
So the grid resize perfect in LTR, But in RTL it's not working.
After resize it's looking like this:
The different between the 2 pictures is that when the menu that show in the first picture, is disappear , the grid column not resize to 100% of the page.
but when this grid is with ltr it is.
Any one has any idea?
The solution was to grow up the timeout. some how in ltr it's taking more time...
var Add_Wait_To_Resize = $rootScope.Language_Direction == "LTR" ? 100 : 610 ;
setTimeout(function() {
$scope.gridApi.core.handleWindowResize();
}, Add_Wait_To_Resize);
Related
I encountered something really really really odd with TStringGrid (Delphi XE). I have seen that sometimes when I click the first line in my grid, it turns black (or shows scrambled canvas 'stolen' from other controls on form).
It happens ONLY in certain configurations, when the grid receives focus. Once you click another area in the grid everything looks ok until the focus is moved to another TStringGrid.
How to reproduce:
put TWO string grids on a form
set them as shown below (Update: I realized that goRowSelect and goEditing must be 'true')
click the first cell in one grid -> nothing happens
click the first cell in the second grid -> the first cell gets black (see screenshot)
The problem appears also in other circumstances (not necessary to have 2 grids on a form), but I managed to reproduce it only when I have 2 grids.
object grid1: TStringGrid <------- same for Grid2
Left = 2
Top = 8
Width = 422
Height = 381
BevelEdges = [beLeft, beTop]
DefaultColWidth = 80
DefaultRowHeight = 15
DoubleBuffered = True
FixedCols = 0
Options = [goFixedVertLine, goFixedHorzLine, goVertLine, goHorzLine, goRangeSelect, goDrawFocusSelected, goColSizing, goEditing, goRowSelect, goFixedHotTrack]
ParentDoubleBuffered = False
TabOrder = 1
end
Any idea on how to fix this?
I can reproduce your problem with XE3 as well. After I have reset ParentDoubleBuffered to True, the problem is gone.
Generally speaking, when I see odd black rectangle in a control, I will first check the ParentDoubleBuffered settings. I saw you have enabled double buffering for the two grids. Do you have any special reason to do that? If you intend to avoid flickering during resizing or cell update, there are some techniques helpful.
Problem
I am having problems with my sortable list with several items of various height. The problem occurs when I'm trying to move a larger item to the first or last position (which both have smaller objects). If I succeed currently depends very much on where on the larger item I click and start dragging.
If I want to move the item to the smaller bottom position I must click close to the bottom of the item for it to work, and if I want to drag it to the top position I must click closely to the top. But I want to be able to drag the item by clicking anywhere.
Some additional information
The items cannot be dragged outside the parent and the parent is only as large as it has to be and a scroll appears if it's larger than it's container. So it seems that I cannot drag the larger item past the first(smaller) item if I don't drag it in the top part of the item.
I've been trying to fix this by using cursorAt and using top:0 and another test using bottom:0 But it doesn't seem to make any difference (so I might have misunderstood how to use it). I am currently using tolerance: pointer.
I can bypass the problem of not being able to drag the larger item to the last position by temporary during the sorting increasing the height with the height of the dragged item. But it doesn't always work and its not a very good solution. And the problem of not being able to drag it to the top still appears?
I cannot change the JQuery code as in jquery-sortable-with-containment-parent-and-different-item-heights
Question:
How can I drag a larger item to the top or bottom position while allowing the user to click anywhere on the item?
Thanks for your help!
This might not solve your problem, but I thought I'd share the results of some experimenting I did today. I needed to make a sortable photo gallery with inline-block pictures of varying widths, and found that moving wider photos would be really hard work because the placeholder was smaller than the item I was moving. I ended up using this:
container.sortable({
placeholder: "photo placeholder",
start: function (event, ui) {
ui.placeholder.width(ui.item.width());
}
});
The custom placeholder classes are there to ensure the placeholder isn't hidden by default, and the start event ensures that the placeholder is the same width as the item you're about to move. This worked very well for me, and in your case, substituting height for width might work.
I also tried using containment as you have done, and found that it sometimes makes things much harder depending on the items in the row. Like you have explained, including tolerance: "pointer" helps to alleviate the issues, but if possible, removing containment generally makes the UI more forgiving.
Today I'm facing "a typical" problem on iOS with a page scrolling when a user selects an input text. The point is that I'm using a scrollable page including a lot of texts and I need this. So I can't use a solution that disables scolling by preventing default, minimizing the view etc..
I basically need to open a software keyboard without scrolling the page.
I also need to find a solution that will be suitable for my users - no screen blinking, etc... After some research I finally managed to find a working solution.
Please see my answer below.
The idea is to return the page to its original position as soon as possible and thus prevent the iOS scrolling animation.
You simply add a focus handler to your input text field and in this handler you firstly read the window.scrollTop property and than set it back with a delay of 0 ms.
Here is my code (using jQuery):
$("#myinput").on("focus", function() {
var scrollTop = $(window).scrollTop();
setTimeout(function() {
$(window).scrollTop = scrollTop;
}, 0);
});
I hope there is no bug in this - actually I'm using TypeScript so if you want to see my original code here it is:
this._inputText.on("focus", () => {
var jQueryWin:JQuery = <JQuery>$(window);
var scrollTop:number = jQueryWin.scrollTop();
setTimeout(() => {
jQueryWin.scrollTop(scrollTop);
}, 0);
});
OK - I hope this helps you guys to better control an unwanted page scrolling when dealing with input elements.
I am using jqGrid with ui.multiselect.js for column choosing and reordering. The dialog which comes up is resizable but when resized, the contents of the dialog are not resized.
Do you have to hook into any event do the stuff?
You are right. Currently it's a problem in the column chooser.
It's better to make some fixes in the code of the columnChooser method. Before all you can improve the situation with resizing by making some changes in the Column Chooser dialog after the dialog is created. For example with the following code
$(this).jqGrid('columnChooser',
{width: 550, msel_opts: {dividerLocation: 0.5}});
var columnChooser = $("#colchooser_" + $.jgrid.jqID(this.id));
columnChooser.css('min-width', columnChooser.width() + 'px');
var dialog = columnChooser.closest('div.ui-dialog');
columnChooser.closest('div.ui-dialog').css('min-width', dialog.width() + 'px');
var div = columnChooser.children('div:has(div.ui-multiselect)');
div.css('width', '100%');
var uiMultiselect = div.children('div.ui-multiselect');
uiMultiselect.css('width', '100%');
uiMultiselect.children('div.available').css({width: '49.9%'});
uiMultiselect.children('div.selected').css('width', '49.9%');
you will have fairly good results with the horizontal resizing (see the demo). In the way you can either solve or at least have improve the results of resizing.
UPDATED: I posted here suggestions to make columnChooser really resizable. You can see the results on the demo.
I have three tabs in a Jquery UI tabs widget. Inside of the tabs I am creating a Wijmo Grid. One on each tab. The Grid is based on Jquery UI as well. The grid on the first tab seems fine.
The grid on the second and third tabs (the hidden ones) have strange sizing issues. The Grid on one appears roughly 10 pixels wide and the full height. The one on the third tab appears about 50 by 50 pixels.
I know the code on those tabs is fine because if I make one of those the primary tab then it works fine and the other two are broken. So I think it is some sort of interaction between the Jquery UI Tabs widget and the contents of the tabs (a Wijmo Grid). Does anyone know what causes this strange interaction and what I can do to make it work predictably?
The Grid does size calculation when initializing. It needs to be displayed somehow when doing so.
You can add class="ui-helper-hidden-accessible" to make it off screen when rendering.
Make sure you initialize the grids then the widgets. Or you can call $("#grid").wijgrid("doRefresh"); when the tab is activated that it is contained in.