Mostrar controles de formulario de la tabla anterior cuando se está editando en línea con jqGrid

Question

Estoy usando jqGrid con edición en línea activada. El problema es que el contenido de algunos de los campos son bastante largas, y por defecto el campo no es lo suficientemente grande como para ser utilizable:

Lo que quiero hacer es establecer un ancho fijo para el área de texto, y que se expanda para que sea visible por encima de la tabla cuando se enfoca. Algo como esto:

que puede establecer el CSS para el área de texto en editoptions:dataInit, pero si acabo de aumentar la anchura, el lado derecho del área de texto consigue recortado al final de la celda de la tabla. ¿Supongo que puedo arreglar esto con un CSS inteligente?

BTW, sé que un editor emergente probablemente tendría más sentido para esto, pero el cliente insiste en que sigue siendo un editor en línea.

Answer 1

Si entiendo sus requisitos correctamente, quiere tener textarea que son más grandes que la celda correspondiente de la grilla. En el caso, podría sugerirle que cambie la posición de textarea a "absoluta". En el caso de que uno puede cambiar el tamaño de textarea y tienen resultados como

¿Cómo se puede ver el gran textarea se solaparán los otros controles de entrada. Para poder modificar todos los campos de entrada y hacer que la entrada en textarea sea más cómoda, sugiero usar jQuery.resizable(). Así se podrá cambiar el tamaño de la textarea:

Encontrará la demo correspondiente here. La parte más importante del código es el siguiente:

onSelectRow: function (rowid, status, e) { 
    var $this = $(this); 
    if (rowid !== lastSel) { 
     if (lastSel) { 
      $(this).jqGrid('saveRow', lastSel); 
     } 
     lastSel = rowid; 
    } 
    $this.jqGrid('editRow', rowid, { 
     keys: true, 
     oneditfunc: function(id) { 
      var $textareas = $("#" + id + " textarea"); 
      $textareas.each(function() { 
       var $textarea = $(this); 
       $textarea.css({position: "absolute", zIndex: "auto", width: "200px"}); 
       $textarea.position({ 
        of: $textarea.parent(), 
        my: "left top", 
        at: "left top", 
        offset: "1 1" 
       }); 
       $textarea.resizable(); 
       // now we fix position of the resizable wrapper which is 
       // the parent of the textarea after calling of .resizable() 
       $textarea.parent().css({ 
        "padding-bottom": "0px", 
        "padding-right": "0px" 
       }); 
       // change focus to the control from the clicked cell 
       $("input,select,textarea", e.target).focus(); 
      }); 
     } 
    }); 
    return true; 
} 

En el código anterior que utiliza adicionalmente el truco con la configuración de enfoque en la célula se hace clic, como he descrito originalmente en the answer.

Para que las diferencias de mis sugerencias para el comportamiento jqGrid norma más clara que sugiero para comparar la demo anterior con the following one que muestran

ACTUALIZACIÓN: Después de la escritura de la respuesta que he publicado the feature request para triand. Uno de los problemas más importantes en la implementación de la sugerencia anterior fue que no se puede mover el código que establece la posición de textarea a "absoluto" completo en dataInit. La sugerencia en la solicitud de función lo hará posible.