28234 sujets

CSS et mise en forme, CSS3

[RESOLU] Bug Mozilla : input par dessus une iframe

Salut à tous !

voila je rencontre un probleme qui est pour le moins bizarre sous Mozilla / Firefox : j'utilise, pour les besoins d'un projet, une iframe avec des formulaires positionnés en 'absolute' par dessus celle-ci.

Le problème est que lorsqu'on clic sur un champs pour l'éditer, le curseur d'édition (la petite barre verticale qui clignote) n'apparait pas ! Pourtant on peut rentrer un texte sans aucun souci, mais sans voir la position de ce curseur : cf code ci-dessous :


<html>
<head>
<title>Document sans nom</title>
<style type="text/css">

	html, body {
		width : 100% ;
		height : 100% ;
		margin : 0px ;
		padding : 0px ;
	}

	#iFrame {
		width : 50% ;
		height : 50% ;
	}
	
	#Popup {
		position : absolute ;
		top : 100px ;
		left : 100px ;
		z-index : 10 ;
		background : #F5F5F5 ;
		border : 1px solid #333 ;
		padding : 10px ;
	}

</style>
</head>

<body>

	<iframe id="iFrame" name="iFrame" src="404.html"></iframe>

	<div id="Popup">
	<p>Mon formulaire</p>
	<form name="form1" method="post" action="">
		<input type="text" name="textfield">
	</form>
	</div>
	
</body>
</html>


Il semblerait que ce problème n'intervienne que quand le champs est positionné par dessus la iframe. Car si je ne le positionne pas par dessus celle-ci, le curseur d'édition apparait correctement. Par exemple en remplacant le style de #Popup par le code :


	#Popup {
		position : absolute ;
		top : 100px ;
		right : 10px ;
		z-index : 10 ;
		background : #F5F5F5 ;
		border : 1px solid #333 ;
		padding : 10px ;
	}


Donc si quelqu'un pouvait déjà me confirmer que sous Mozilla / Firefox il rencontre le même problème ce serait cool. Et ce serait encore plus cool si quelqu'un avait une solution pour résoudre ce problème Smiley cligne

Merci d'avance !
Modifié par AntiStatic (06 Jul 2005 - 13:29)
En effet, le curseur n'apparaît pas sous Mozilla /Firefox

Dans Opera... le formulaire n'apparaît pas Smiley cligne

Et pour tout dire, cet iframe incongru en arrière-plan sert à quoi, au juste ? Smiley eek

<edit><re-edit>sottise enlevée pour la solution</></>
Modifié par Laurent Denis (05 Jul 2005 - 12:06)
ok donc c'est pas mon Mozilla qui trip ... ca m'aurait arrangé Smiley smile Pourtant on peut correctement éditer le texte de l'input, c'est plutot étrange ...

Pour la iframe, je m'en sert pour faire un éditeur texte riche en un peu plus poussé : un back office WYSIWYG (what you see is what you get), et sur ce coup je me pas absolument pas m'en passer !

Oui effectivement sous opéra j'avais remarqué. C'est parce que opéra 'protège' les iframe en empechant l'affichage de contenu par dessus il me semble ...

Par contre c'etait quoi ta 'sottise enlevée pour la solution' parce que c'est peut être pas si idiot que ca Smiley cligne Au stade ou j'en suis je suis pret à entendre toutes propositions Smiley smile

Tks pour ta confirmation en tout cas !
AntiStatic a écrit :
Pour la iframe, je m'en sert pour faire un éditeur texte riche en un peu plus poussé : un back office WYSIWYG (what you see is what you get), et sur ce coup je me pas absolument pas m'en passer !


Là, en effet... Smiley lol

AntiStatic a écrit :
Par contre c'etait quoi ta 'sottise enlevée pour la solution' parce que c'est peut être pas si idiot que ca Smiley cligne Au stade ou j'en suis je suis pret à entendre toutes propositions Smiley smile


Instinctivement, j'avais pensé à un cursor:text, en oubliant que ce n'était pas du tout le problème Smiley cligne
Effectivement je ne vais pas pouvoir m'en sortir avec un cursor:text Smiley smile

Donc du coup pas de solution en vue, si ce n'est qu'au lieu d'utiliser un popup DHTML je peux utiliser un vrai popup (window.open) ... erf je vois déjà le boxon que ca va rajouter à mes devs ... rallalalala Mozilla ne sort vraiment par les trous de nez des fois ...

Merci tout de même !
Je vais peut-être proférer une ânerie, mais je me demande si un moz-binding ne permettrait pas de modifier le comportement du curseur dans les contrôles de ton formulaire.
ba alors ca c'est une bonne question ! J'avou que je ne savais meme pas qu'il y avait des moz-binding ... et d'après ce que j'ai pu vite fait voir sur le sujet je ne vois pas comment cela pourrait forcer le curseur à s'afficher correctement ?
Oui, j'ai cherché un peu depuis avoir dit cet énorme ânerie, et je confirme que c'était une ânerie.

certes, tu pourrais faire un interface XUL, mais je me doutes que ce n'est pas vraiment au rang de tes priorités.

Là, je sèche. Aucune des tentatives en CSS ne modifie le comportement de Firefox.

Dernière ânerie : pas possible de réserver une zone à côté de l'iframe pour les formulaires, au lieu de passer par des popups ?
Ben non je ne peux pas réserver une place pour les form etant donné que la iframe est affichée sur tout l'écran normalement : width :100% et height : 100% !

Mais bon en fait le pb va vite être réglé car j'ai bel et bien l'impression que ce que je veux faire ne pourra pas fonctionner sous Firefox Smiley ohwell Pourtant c'était une de mes premières contraintes ...

Pour aller plus loin : le back office que je développe utilise une orgie d'attributs contentEditable, qui n'est actuellement pas supporté par Firefox. Le seul moyen d'avoir un contenu éditable directement dans une page HTML sous Firefox est de la passer en designMode = "on". Sauf que ce mode permet alors de modifier TOUS les elements de la page.

Et la ca pose probleme étant donné que je souhaite justement restreindre l'édition à certains élements qualifiés d'éditable. Par exemple :


<h1 contentEditable="true">Le titre à modifier</h1>

Mais bon j'ai tout de même fait le test sous Firefox et le résultat est ... comment dire ...plutot décevant : crash du navigateur carrement oui ! Cf le code ci-dessous :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">

	html, body {
		width : 100% ;
		height : 100% ;
		margin : 0px ;
		padding : 0px ;
	}

	#iFrame {
		width : 50% ;
		height : 50% ;
	}
	
	#Popup {
		position : absolute ;
		top : 100px ;
		right : 10px ;
		z-index : 10 ;
		background : #F5F5F5 ;
		border : 1px solid #333 ;
		padding : 10px ;
	}

}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--

	window.document.designMode = "On";

//-->
</script>
</head>

<body>

	<iframe id="iFrame" name="iFrame" src="404.html"></iframe>

	<div id="Popup">
	<h1 id="MyTest" contentEditable="true">Le titre à modifier</h1>
	<p><a href="javascript:;">Mon formulaire</a></p>
	<form name="form1" method="post" action="">
		<p>
			<input type="text" name="textfield">
</p>
	</form>
	</div>
	
</body>
</html>

Pour faire un petit de crash de Firefox c'est trés simple :
> Prendre le code ci-dessus, le coller dans une nouvelle page et la sauver en 'test.html'
> Cliquer sur le h1 : Le titre à modifier
> La des poignées apparaissent autour du div contenant le formulaire pour pouvoir le déplacer
> Déplacer ce div au dessus de la iframe (la on constate déjà un premier problème car le div ne peut pas aller correctement par dessus la iframe) et relacher le bouton de la souri bien au dessus de la iframe
> Le div reste coller a la souri donc pour le décoller cliquer dans la page en dehors de la iframe !
> PAF Firefox Crash !

Ce pb de crash de Firefox semble pouvoir être éviter si l'on met la iframe dans un div positionné en absolute, mais le div éditable n'arrive toujours pas à passer par dessus la iframe.

Autre point intéressant : si l'on postionne par défaut le contenu éditable par dessus la iframe, en remplacant le style de #Popup par :


	#Popup {
		position : absolute ;
		top : 100px ;
		left : 10px ;
		z-index : 10 ;
		background : #F5F5F5 ;
		border : 1px solid #333 ;
		padding : 10px ;
	}


lorsqu'on clique sur le h1 : Le titre à modifier, le curseur n'apparait pas non plus. Apparement ce problème touche donc tous les éléments éditable (input text, textarea, element en contentEditable="true") positionnés par dessus une iframe !

Toujours pareil si on peut me confirmer le pb et si quelqu'un a une solution car la je désespère Smiley bawling Mais bon je me fais pas trop d'illusions maintenant ma compatibilité Mozilla / firefox est tombée à l'eau ...
AntiStatic a écrit :
si on peut me confirmer le pb et si quelqu'un a une solution car la je désespère Smiley bawling Mais bon je me fais pas trop d'illusions maintenant ma compatibilité Mozilla / firefox est tombée à l'eau ...


J'ai un peu trop de choses sur le feu en même temps pour faire un test-crash dans l'immédiat Smiley cligne

Mais je te confirme ça rapidement, si personne ne s'y colle.

Si la compatibilité Mozilla / firefox est importante, alors, franchement, réfléchis à deux fois à propos de XUL. Je ne suis pas du tout un aficionados Gecko, juste un mec normal, mais ce truc a toutes les chances de jouer un rôle clé dans ce type d'interface...
je vais matter ca de plus pret ! Mais bon je ne vois pas comment je pourrais créer des fonctionnalités qui n'existe pas sous Firefox ... je vais tout de même essayer de faire au mieux Smiley cligne

Tks pour ton aide !
Pour ceux que cela pourrait intérésser, il existe tout de même Mozile qui permet d'editer en WYSIWYG certain éléments d'une page : une sorte d'equivalence pour le contentEditable de IE !

Vous trouverez ca ici : Mozile Smiley cligne
He ben ! finalement j'ai fini par trouver une solution pour ce bug référencé sur Bugzilla : Bug 226933

La solution consiste à passer un overflow:auto sur le DIV contenant des input positionnés en absolute par dessus une iframe ! Donc ce qui donne pour le style de #Popup donné plus haut :


#Popup {
position : absolute ;
top : 100px ;
right : 10px ;
z-index : 10 ;
background : #F5F5F5 ;
border : 1px solid #333 ;
padding : 10px ;
[b]OVERFLOW : AUTO ;[/b]
}


Bien tiré par les cheveux quand même Smiley ohwell
Sujet clos
Aller à