Misplaced modals when height is "auto","100%" or when parent is hidden

[PaolaRuby]

It is confusing if you have another grid and modal shows Example: https://jsfiddle.net/fjy5m91u/1/

Maybe the top attribute works if you change o.alerttop = pos[1] + (this.p.height/2)-25; for o.alerttop = pos[1] + (isNaN(this.p.height)?10:this.p.height/2)-25; there https://github.com/tonytomov/jqGrid/blob/b2bf4686284ae0637752db380de741382323f4a7/js/grid.formedit.js#L1780-L1786 also left attribute fails on this example, maybe don´t support dinamically changes on the dom, like bootstrap's responsive cols breakpoints(col-sm-6 col-xl-2), or using resizeGrid

[tonytomov]

Hello,

Thank you for find this problem and provide example. It helps. Of course we need to check if the width and height are numbers and we will do this (Thanks), but this will not resolve your problem.

The problem is that the element

<div class='col-sm-6 grid1Div' style="display:none;">
....
</div>

is initially hidden. If the element is hidden, then this element does not exist in the DOM and the browser ignore that element instead that it exist physically in the tree. This cause

var pos=$.jgrid.findPos(this); 
...

to return [0,0] as position of the grid, which cause the problem you find.

I see tow possible solutions of your problem

1. On place of display:none set visibility:hidden (this way the browser take in account this element) and replace

$(".grid1Div").show();

with

$(".grid1Div").css("visibility","visible");

2. We can create function which will check if the grid has currently hidden parent element, show that element, perform the calculation and hide it again, but in this case we are not sure that this will be good for the developer, since we change the DOM which is outside the grid.

I recommend you the first way when possible.

Best Regards, Tony

[PaolaRuby]

Hello @tonytomov After remove

<div class='col-sm-6 grid1Div' style="display:none;">
....
</div>

the problem still remains with top attribute, i put display:none; for show other problems with left attribute

Example without "display:none;: https://jsfiddle.net/1aof0xp6/ Example with visibility:hidden;: https://jsfiddle.net/6ghkj7sa/ (still top attr fails)

With height is "auto" or "100%" i try this

Maybe the top attribute works if you change o.alerttop = pos[1] + (this.p.height/2)-25; for o.alerttop = pos[1] + (isNaN(this.p.height)?10:this.p.height/2)-25; there

and top attribute works again, It's a problem because 'auto'/2 results NaN

[tonytomov]

As I say, the top positin will be fixed

[PaolaRuby]

Thank you,

i still learning english, sorry

[tonytomov]

Hello @PaolaRuby ,

I have fixed the problem. Please let me know if it is ok for you. Thank you.

Regards

[PaolaRuby]

Hello @tonytomov Great! I have tested and it works. Thank you

We can create function which will check if the grid has currently hidden parent element, show that element, perform the calculation and hide it again, but in this case we are not sure that this will be good for the developer, since we change the DOM which is outside the grid.

If that is not planned for now, maybe you can open the issue report