3

Estoy creando una aplicación javaEE, en la que algunas páginas usan la librería de jQuery cleditor para algunos campos textarea. Esta librería, permite alternar el campo entre un textarea y un iframe a través del botón "source" de la barra de herramientas, para mostrar el contenido como html o como texto plano.

Aquí se puede acceder a la librería.

Estos campos textarea están creados en tablas de la siguiente manera:

<td  id="descEditor" style="visibility: hidden;" colspan="2">
    <form:textarea path="form.descripcion" id="descripcion" cssStyle="overflow: auto;" />
</td> 

Las llamadas a la librería son:

vDescripcion = $("#descripcion").cleditor({height:<%=h%>,
           controls: 
               "cut copy paste pastetext | " +
               "bold italic underline strikethrough subscript superscript | font size | " +
               "color highlight removeformat | bullets numbering | outdent " +
               "indent | alignleft center alignright justify | undo redo | " +
               "rule image link unlink  | print source"})[0];
    $('#inicialEditor').css('visibility','');
    $('#descEditor').css('visibility','');

    $(vDescripcion.$frame[0]).attr("id","cleditCool");
    var cleditFrame;
    if(!document.frames){
       cleditFrame = $("#cleditCool")[0].contentWindow.document;
    } else {
        cleditFrame = document.frames["cleditCool"].document;
    }

Todo funciona correctamente y se ve de la siguiente y se ve bien en escritorio y dispositivos móviles Android.

introducir la descripción de la imagen aquí

El problema viene cuando veo la aplicación en un dispositivo iOS, en los que el contenido del texto en el modo iframe (ojo, con el modo textarea no ocurre), se sobrepasa del mismo. Pongo captura del móvil:

introducir la descripción de la imagen aquí

He probado a modificar el CSS añadiendo al iframe la propiedad overflow-y: scroll; pero no funciona.

¿Alguna idea?

3
  • lo unico que se me ocurre es que pruebes con la propriedad css ::-webkit-scrollbar { visibility: visible; }
    – Federico
    el 22 ene. 2019 a las 10:08
  • o en caso tambien podria ser, si el iframe tiene un contenedor padre, le agregas -webkit-overflow-scrolling:touch; overflow:auto; (al contenedor padre)
    – Federico
    el 22 ene. 2019 a las 10:26
  • @FedericoIannarelli he probado lo que comentas, y el texto queda contenido en la parte blanca de la segunda imagen, pero iframe sigue ocupando lo mismo en altura, de manera que se sigue viendo toda la parte gris que antes ocupaba el texto, pero sin el texto. Por otra parte, al hacer el scroll, se sube también la barra de herramientas y el botón para cambiar al source deja de funcionar.
    – DevCodeG
    el 22 ene. 2019 a las 12:49

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.