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.
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:
He probado a modificar el CSS añadiendo al iframe la propiedad overflow-y: scroll;
pero no funciona.
¿Alguna idea?
::-webkit-scrollbar { visibility: visible; }
-webkit-overflow-scrolling:touch; overflow:auto;
(al contenedor padre)