Adaptation de la fenêtre d'édition au client

Permettre d'avoir une fenêtre d'édition plus ou moins grande en fonction de la résolution de son écran.

Solution 1

Je vois que personne n'a jamais réagi sur cette proposition... en dehors des masos qui utilisent lynx ;-) vous avez tous des écrans 15 pouces ???
Pour ma part je trouve de plus en plus agaçant d'avoir à éditer une page dans une fenêtre qui utilise moins de la moitié de mon écran (je suis en 1280x1024)...

Je pense qu'on peut traiter le problème de deux manières :

• comme WikiTavi?, permettre à l'utilisateur de régler lui même, dans , la taille de sa fenêtre d'édition
  • avantages : c'est l'utilisateur qui choisit ; la solution fonctionne facilement avec tous les navigateurs
  • inconvénients : ajoute un pouyème de complexité.
• modifier la nouvelle classe de style ".edit" pour adapter automatiquement la taille du formulaire de manière à ce qu'il prenne le maximum de place disponible
  • avantages : fonctionnement transparent pour l'utilisateur ; centralisation des contrôles de mise en forme dans la feuille de style
  • inconvénients : plus difficile à mettre en oeuvre ; pas évident à adapter sur tous les navigateurs.

Code HTML de la page expurgé des éléments non nécessaires.


Code CSS à modifier :

.page { background-color: #FFFFFF; padding: 10px; border: 1px inset; border-bottom: none; }
.edit { width: 100%; height: 400px; }


Code CSS remplaçant le précédent :

.page { width: 99%; }
html>body .page { width: auto; }
.edit { width: 100%; height: auto; }


-- CharlesNepote

• C'est bizard... avec ces modifications, la fenêtre d'édition déborde systématiquement m'obligeant à scroller pour voir les boutons sauver, apeçu et annulation, et ce sous mozilla 1.7. Mais dans la mesure où j'ai modifier déjà les CSS et le code pour utiliser un menu à gauche... -- JeanMorlet

---

Solution 2 ?

Ah mais je ne l'avais pas vue cette page !!! Voilà mes réflexions sur le sujet, que je transfère de ma page.

L'idéal serait en effet que la taille de cette zone s'ajuste à la fenêtre du navigateur, aussi bien en horizontal qu'en vertical (au boulot je suis en 1280x1024, alors je me sens concerné !). Pour le moment elle est codée en dur à l'aide d'attributs rows et cols. J'ai regardé côté CSS ce qu'on peut faire, il y a théoriquement moyen d'obtenir une taille ajustée dans les 2 directions. Une fois les attributs supprimés, on peut ajouter dans le CSS :

textarea.edit {

• width: 100%;
• height: 100%;

}

En pratique ça fonctionne pour width, mais pas pour height. Un petit tour au W3C donne la réponse : il faut que l'élément parent ait aussi un height pour que celui de l'enfant soit pris en compte. Il suffit donc de mettre un height au tag form. Cependant ceci n'est actuellement pas possible car aucun form n'a d'identifiant, donc je ne vous raconte pas la mise en page si on fait ça... Il faudrait donc mettre un identifiant au form d'édition et on obtiendrait dans le Html :

<form id="edit" action="..." method="post">
<input type="hidden" name="wiki" value="..." />
<input type="hidden" name="previous" value="..." />
<textarea onkeydown="fKeyDown()" name="body" wrap="soft">
...
</textarea><br />
<input id="sauver" name="submit" type="submit" value="Sauver" accesskey="s" />
<input id="apercu" name="submit" type="submit" value="Aperçu" accesskey="p" />
<input id="annuler" type="button" value="Annulation" onclick="document.location='...';" />
</form>

et pour les CSS :

form#edit {

• height: 80%;

}
form#edit textarea {

• width: 100%;
• height: 100%;

}

Remarques :

• testé et... échoué pour l'ajustement vertical :-( Ca marche en Html 4.01 transitionnal mais pas en XHtml transitional, encore une sombre histoire de mode de compatibilité des navigateurs. Bon il faudra que je regarde cela de plus près.
• le height: 80% pour le form.edit, c'est pour garder de la place pour le texte hors formulaire (c'est un problème : on n'a pas le droit à une taille du genre 100% - n lignes).
• chez moi pas besoin de mettre une largeur au div.page, à moins que je n'ai pas suffisamment testé ?
• j'en ai profité pour ajouter des id aux boutons du formulaire.

Le bilan :

• largeur automatiquement ajustée OK
• hauteur automatiquement ajustée à approfondir

Bien sûr les volontaires pour tester sont les bienvenus !

-- JmPhilippe
Il me semble qu'on a dit quelque part que tout formulaire devrait inclure un bloc div en XHTML1.0 strict. Si je ne me trompe on aimerait bien pouvoir passer WikiNi sous cette forme, donc ce serait peut-être mieux d'envisager cela tout de suite... Ah oui, c'est ici qu'on en parle : WikiNiEnHTMLStrict -- LordFarquaad

Exact ! En fait le code que j'ai mis est tiré des essais que j'ai fait sur ma version, donc sans <div> supplémentaire (je ne travaille pas avec la version CVS ;-) ). S'il ya des volontaires qui ont ce div en plus, je leur laisse pour le moment le soin d'essayer un code à peine différent :

<form id="edit" action="..." method="post">
<div>

• <input type="hidden" name="wiki" value="..." />
• <input type="hidden" name="previous" value="..." />
• <textarea onkeydown="fKeyDown()" name="body" wrap="soft">
• ...
• </textarea><br />
• <input id="sauver" name="submit" type="submit" value="Sauver" accesskey="s" />
• <input id="apercu" name="submit" type="submit" value="Aperçu" accesskey="p" />
• <input id="annuler" type="button" value="Annulation" onclick="document.location='...';" />

</div>
</form>

et pour les CSS :

form#edit {

• height: 80%;

}
form#edit div,
form#edit textarea {

• width: 100%;
• height: 100%;

}

-- JmPhilippe

---

Solution 3

Hauteur auto adaptative IE/Firefox :

Exemple de code :

<SCRIPT LANGUAGE="JavaScript">
function expandTextArea(textarealabel, e){

• nb_line=escape(textarealabel.value).split("%0A").length+1;
• nb_line=nb_line-1;
• if (nb_line<15) nb_line=15;
• textarealabel.rows=nb_line;

}
</SCRIPT>

<FORM NAME="formu" ACTION="./" METHOD=POST>
<TEXTAREA STYLE="width:99%;overflow:visible" NAME="content" ONKEYDOWN="expandTextArea(this, event);"> ..... </TEXTAREA>
</FORM>

<SCRIPT>

• expandTextArea(document.formu.content,0);

</SCRIPT>

---

---