Ajustement input automatique

Version imprimable

Bonjour

je vous explique mon problème:
je génère automatiquement ce genre de page:
http://mysterra.info/test/test.htm
Si vous allez voir le lien, vous allez voir que l'affichage n'est pas tip top...
Voici le code de la page:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div style="width: 700px;"> <hr> <div> <div style="float:left;"> <input type="checkbox"> <span>Troubles de la deglutition : </span> </div> <input style="width: 100%;" maxlength="254" type="text"> </div> <div> <div style="float:left;"> <input type="checkbox"> <span>Pathologies broncho-pulmonaires : </span> </div> <input maxlength="254" type="text"> </div> </div>
Ce que je voudrais, en fait, c'est que le input démarre à la fin du texte associé à la checkbox pour aller jusqu'au bout de la balise div...
Je pensais qu'en mettant

Code:

<input style="width: 100%;"

le problème allait être résolu, mais c'est pas le cas. Et là, je ne sais plus quoi testé... Alors je m'en remet à vous.
J'ai l'impression que mon problème ne peut pas être résolu avec les css, est ce que je me trompe ?

Salut,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="width: 700px;">
	<hr>
 
	<div style="float:left;">
			<input type="checkbox">
			<span>Troubles de la deglutition : </span>		
		<input style="width: 100%;" maxlength="254" type="text">
	</div>			
	<div style="float:left;">
			<input type="checkbox">
			<span>Pathologies broncho-pulmonaires : </span>
			<input maxlength="254"  type="text">
	</div>
</div>

En gros si tu mets ton texte et ton input dans le meme div il seront sur la meme ligne

20/03/2007, 10h37
Sensei.f

Oui mais... l'input ne va pas jusqu'au bout de la div qui fait 700px de large... c'est bien ça le problème !

Salut,

En faite ton problème viens de <input maxlength="254" type="text" style="width:100%;" /> ton input prendra toute la largeur du div sous ie mais pas sous FF donc il vaux mieux mettre une largeur fixe.

regarde avec le code qui suit la différence entre IE et FF :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
        .ligne{
                width:700px;
                height:30px;
        }
</style>
 
<div style="width:700px;">
	<hr>
	<div class="ligne">
		<div style="float:left;">
			<input type="checkbox" id="a" />
			<span>Troubles de la deglutition : </span>		
		</div>
		<div style="float:left;">
			<input maxlength="254" type="text" style="width:100%;" />
		</div>
	</div>
	<div class="ligne">
		<div style="float:left;">
			<input type="checkbox" id="b" />
			<span>Pathologies broncho-pulmonaires : </span>
		</div>
		<div style="float:left;">
			<input maxlength="254" type="text" />
		</div>
	</div>
</div>

[EDIT]
T'as une explication ici :
http://www.developpez.net/forums/sho...d.php?t=297283
[/EDIT]

20/03/2007, 11h19
Sensei.f

Ok, donc je suis bien emmerdé...
je ne peux pas calculer la taille de la div qui contient le texte & la check... car la police du texte peut changer...

donc faut faire une fonction en javascript qui redimensionne l'input correctement, c'est bien ça ? Seulement, est ce possible de trouver la taille de la div, si celle ci n'est pas exprimé explicitement ?
20/03/2007, 11h27
grabriel

as-tu lu la réponse à ton problème dans le lien du dessus :

Citation:

Envoyé par candygirl

Tu peux regarder ton site sur le navigateur opera et tu verras à quoi il ressemblera sur tous les navigateurs récents lorsque tu auras rajouté le doctype au haut de ta page.

En mode standard, la propriété height en % ne peut s'appliquer que si le height du parent est clairement défini, ce qui n'est pas le cas dans ta structure:

html:100%, body 100%, 1er div min-height 100%, 2ème div height 100%

Vu que ton premier div n'a pas de height le 2ème ne peut pas attribuer de hauteur en % et prend donc la valeur auto.

Comme tu n'as pas mis de doctype, FF interprète néanmoins ce height de 100%, seulement il te piège plus loin, puisque ton 2ème div ayant une hauteur de 100% (de la taille de la fenêtre en réalité et non de la hauteur réel du 1er div), le premier s'arrête aussi à cette même hauteur de 100% de la fenêtre et donc ton fond n'est plus visible.
20/03/2007, 13h42
Sensei.f

J'ai bien compris que comme m'a div supérieur est de 700px, le input prends 100% de 700px soit... 700px.
Ca m'a permis de comprends l'utilisation des %.
Mais problème reste le même, pour pouvoir positionner correctement mon input, il faut que je calcul dynamiquement sa taille...
Ou alors je suis complètement à l'ouest, et le problème vient du doctype ? :?
20/03/2007, 13h51
grabriel

Citation:

Envoyé par Sensei.f

problème vient du doctype

Yep :king:

http://xhtml.developpez.com/faq/?pag...octype_utilite

bon, désolé, vous allez me prendre pour un boulet, si ce n'est déjà fait :aie:
je viens d'essayer tous les doctypes, et l'affichage ne change rien sous firefox, ça affiche n'importe quoi...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
 
<body>
<div>
	<div style="width:700px;">
		<hr>
		<div style="float:left;">
			<input type="checkbox" id="a" />
			<span>Troubles de la deglutition : </span>		
		</div>
		<input maxlength="254" type="text" style="width:100%;" />
		<div class="ligne">
			<div style="float:left;">
				<input type="checkbox" id="b" />
				<span>Pathologies broncho-pulmonaires : </span>
			</div>
			<div style="float:left;">
				<input maxlength="254" type="text"  style="width:100%;" />
			</div>
		</div>
	</div>
</div>
 
</body>
</html>

20/03/2007, 14h29
MasterOfChakhaL

salut,

D'ou tu sors ca:

Code:

<meta http-equiv="Content-Style-Type" content="text/css" />

les meta http-equiv sont sensées données un équivalent aux en-têtes http envoyées par le serveur (par exemple si le document est consulté hors ligne)
Elle se rapporte au doccument html.

Sinon, pour ton problème initial, j'avoue ne pas avoir d'idées... désolé
20/03/2007, 14h35
Sensei.f

Citation:

Envoyé par MasterOfChakhaL

salut,

D'ou tu sors ca:

Code:

<meta http-equiv="Content-Style-Type" content="text/css" />

les meta http-equiv sont sensées données un équivalent aux en-têtes http envoyées par le serveur (par exemple si le document est consulté hors ligne)
Elle se rapporte au doccument html.

Sinon, pour ton problème initial, j'avoue ne pas avoir d'idées... désolé

Nan pour ça, c'est de la fénéantise, j'ai oublié de l'enlevé... ça provient de là :
http://www.w3.org/QA/2002/04/valid-dtd-list.html
:oops:
20/03/2007, 15h16
Sensei.f

C'est pas possible ! je deviens dingue !
Si ie y arrive, firefox devrait bien y arriver aussi !!!
:evilred: