ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: ralph1996 on April 01, 2017, 12:27:26 am

Title: Issue with z-index of textarea editor
Post by: ralph1996 on April 01, 2017, 12:27:26 am

Issue with multiple grids and textarea editor.

We have a case where we have two grids on a page - one above the other.  The problem I am having is that the textarea editor for the upper grid is falling below the lower grid so it gets partially clipped.

I tried setting the z-index in the style of the editor as well as trying to change the editor style  like:

    div.pq-editor-outer
    {
      z-index:100000;
    }

However these do not work since the position for the pq-editor-outer is absolute.  If changed to relative teh editor shifts down and into the wrong position as well as changing the height of the grid itself.

I have attached an image of the issue. I wodul prefer not to have to worry about the relative z-index on each of the grids since these can be changed and repositioned.

Thanks

Title: Re: Issue with z-index of textarea editor
Post by: paramvir on April 03, 2017, 10:01:12 pm

Please try to set z-index of the top grid.

Code: [Select]

<div id="grid_json" style="margin:auto;z-index:1"></div>


Title: Re: Issue with z-index of textarea editor
Post by: ralph1996 on April 03, 2017, 10:46:48 pm

That is exactly what I was hoping to avoid as these grids can be positioned in different places so it is not always obvious which one will be above or below the other.  So if I set relative z-indexes on each of the top level grids and they are moved, I then have to reindex the grids based on position.

I was hoping there would be a way to just pull the text area editor to the top while editing.

Title: Re: Issue with z-index of textarea editor
Post by: ralph1996 on April 04, 2017, 11:31:48 pm

I resolved this wiht the following:

      function pqEditorZIndex(prevEditorFunction, isBegin )
      {
        return function(event, ui)
        {
          var $grid = $(event.target).closest('.pq-grid'); ;
          if (prevEditorFunction)
            prevEditorFunction(event, ui);
          if (isBegin)
            $grid.css("z-index", "10000");
          else
            $grid.css("z-index", "");
        };
       
      }             

and then in the initialization:

        pqobj["editorBegin"] = pqEditorZIndex(pqobj["editorBegin"], true);
        pqobj["editorEnd"] = pqEditorZIndex(pqobj["editorEnd"], false);
        var _pqGrid = pq.grid("#" + id, pqobj);

This adjust the z-index of the entire grid on the fly as the editor opens and closes.

Title: Re: Issue with z-index of textarea editor
Post by: paramvir on April 04, 2017, 11:58:23 pm

Use of events to change z-index of grid is a great idea :)

But I wonder why prevEditorFunction is needed?