jquery - work - Fecha y hora de X-editable apareciendo en el mismo lugar todo el tiempo: ¿cómo hacer que aparezca al lado del campo de fecha real?

x-editable laravel

Question

Al usar X-editable me encuentro con este problema, donde si especifico el modo de campo datepicker: "popup", obtengo que la ventana emergente se muestre bien ... pero ahora si tengo una tabla larga (vertical u horizontalmente), la más hacia abajo (o hacia la derecha) en la tabla que voy, peor se pone: este selector de fecha / fecha y hora aparece solo en una posición específica en la página (arriba a la izquierda).

Entonces, si tengo 50 registros y hago clic en uno de los fondos para abrir un selector de fechas, ni siquiera puedo verlo aparecer y tengo que suponer que ha aparecido, así que tengo que desplazarme hacia arriba a la parte superior de la mesa para verlo.

Y es aún peor si voy muy lejos en una tabla en una pantalla más pequeña, entonces tengo que desplazarme muy a la izquierda para ver el popover abierto (si no supiera que ahí es donde termina, creo que el guión es roto y no funciona).

Esto es lo que uso en una definición: ¿me falta algo? O algo en CSS tal vez?

$(''.time'').editable({
    type: ''datetime'',
    url: ''post.php'',
    format : ''yyyy-mm-dd hh:ii'',
    viewformat : ''yyyy-mm-dd hh:ii'',
    inputclass : "datepick",
    emptytext: ''...'',
    datetimepicker : {
        weekStart : 1
    },
});

Answer 1

Aclaración del problema

Si lo entiendo correctamente, tiene una larga tabla llena de campos, que el usuario debe completar (similar a esta página de demostración ). Y cuando se desplaza hacia abajo en esta tabla y hace clic en un campo, su correspondiente ventana emergente se mostrará en la parte superior de la página. ¿Tengo razón hasta ahora? Si estoy en lo cierto ...

He comprobado cómo X-editable crearía estas ventanas emergentes. La idea principal que ha utilizado es la siguiente:

• Crea un div (el contenedor principal) y lo agrega inmediatamente después del nodo que abriría esta ventana emergente.
• Este div está usando la posición absoluta con un top dado e left .
• El valor de esta top e left se puede calcular aplicando una función recursiva que agrega recursivamente offsetX y offsetY de sus padres.

Este enfoque para abrir un div es un enfoque muy común y funcionaría en todas las situaciones.

Causas de este problema

¿Dónde está este problema?

• Los códigos de la biblioteca: No, creo que el error no está en los códigos X editables, porque cambié los códigos HTML en esa página de demostración por Firefox Developer Tools y cambié el valor de la altura de cada fila a un número muy grande (1000px) aún así, esas ventanas emergentes se han mostrado exactamente en los lugares correctos.

• Tus propios códigos: es probable que esté allí. Me he dado cuenta de que esta biblioteca está utilizando un par de nombres de clases para su editable-popup principal div , como popover , editable-container , editable-popup , fade , in y right . Es muy probable que estos nombres entren en conflicto con sus propios nombres de clase definidos y provoquen una mala conducta en esas ventanas emergentes. Por ejemplo, anula esa posición absoluta por posición relativa. Por lo tanto, asegúrese de que sus nombres de clase CSS tengan nombres diferentes a los definidos por X-editable.

No puedo responderte con más detalles porque no has publicado tus códigos HTML. Si mis notas no ayudaron, proporcione más información sobre su problema.

Answer 2

Sí, este es un viejo problema con el tooltip / popup posicionamiento.

Por favor prueba el siguiente truco:

$(''.time'').editable({
    type: ''datetime'',
    url: ''post.php'',
    format : ''yyyy-mm-dd hh:ii'',
    viewformat : ''yyyy-mm-dd hh:ii'',
    inputclass : "datepick",
    placement: function (context, source) {
      var popupWidth = 336;
      if(($(window).scrollLeft() + popupWidth) > $(source).offset().left){
        return "right";
      } else {
        return "left";
      }
    },
    emptytext: ''...'',
    datetimepicker : {
      weekStart : 1
    },
});

Por favor, revise un ejemplo de trabajo: http://jsfiddle.net/giftedev/yo0ztmkr/1/