[Qst] - Form + CSS -=> Responsive ?

Salutations,

Je cherche à nettoyer le code d'un de nos formulaires associatifs, et le passer en même temps en responsive.
Il était en table / form, je le passe en CSS / form par la même occasion.

Par contre, sur des champs de type textarea, ça devient immonde sur mobile...

Par ex. :

(...)
	<!-- Ligne 7 !-->
	<div class="row">
		<div class="w-6" title="<? echo $tblInfoColum['Exemplaires']['comment']; ?>">Exemplaire(s)&nbsp;:&nbsp; <?php echo '<INPUT type=text name="'. $tblInfoColum['Exemplaires']['name'] . '" value="?" size="3"></input>'; ?></div>
		<div class="w-6" title="<? echo $tblInfoColum['Commentaire']['comment']; ?>">Commentaire&nbsp;:</div>
	</div>
	<!-- Ligne 8 !-->
	<div class="row">
		<div class="w-6" title="<? echo $tblInfoColum['Etat']['comment']; ?>">Etat&nbsp;:&nbsp; <?php echo '<select name="' . $tblInfoColum['Etat']['name'] . '">';
			foreach ($tblInfoColum['Etat']['enum'] as $value) {
				$value = htmlspecialchars($value);
				echo '<option value="' . $value . '"'; if($value== "?"){echo' selected="selected"';} echo '>' . $value . '</option>';
			}
			echo '</select>'; ?>
		</div>
		<div class="w-6" title="<? echo $tblInfoColum['Commentaire']['comment']; ?>"><?php echo '<textarea name="' . $tblInfoColum['Commentaire']['name'] . '" rows="3" cols="43" />?</textarea>'; ?></div>
	</div>
	<!-- Ligne 9 !-->
	<div class="row">
		<div class="w-6" title="<? echo $tblInfoColum['Acqui']['comment']; ?>"> Acqui.&nbsp;:&nbsp; <?php echo '<select name="' . $tblInfoColum['Acqui']['name'] . '">';
			foreach ($tblInfoColum['Acqui']['enum'] as $value) {
				$value = htmlspecialchars($value);
				echo '<option value="' . $value . '"'; if($value== "Don"){echo' selected="selected"';} echo '>' . $value . '</option>';
			}
			echo '</select>'; ?>
        </div>
	</div>
(...)

Avec le CSS suivant :

(...)
.row {
    width : 600px;
    margin : 10px auto;
}
.row > div {
    float : left;
	height: 20px;
    margin : 2px 10px;

}

.w-1 { width : 30px; }
.w-2 { width : 80px; }
.w-3 { width : 130px; }
.w-4 { width : 180px; }
.w-5 { width : 230px; }
.w-6 { width : 280px; }
.w-7 { width : 330px; }
.w-8 { width : 380px; }
.w-9 { width : 430px; }
.w-10 { width : 480px; }
.w-11 { width : 530px; }
.w-12 { width : 580px; }
(...)

Auriez-vous une idée ?

Merci de votre aide...
Modifié par Casio (28 Mar 2017 - 13:23)

Bonjour.

Le div de classe 'w-6' a pour largeur 280px et votre textarea a pour attribut 'cols="43"...

J'ai vérifié : ça dépasse.

Sur grand écran, il y a la place mais sur mobile... peut-être pas.

En fait, vous n'êtes pas obligé de spécifier cet attribut - textarea par défaut est moins large - et vous pouvez styler 'textarea' via CSS...

Merci de ce retour si rapide .

Je vais tenter de bricoler la dedans.
Je vous tiens informés de l'évolution...

Bien, je viens de tester, et en effet ,je peux simplement créer des style textarea en CSS sans pb.

Par contre, une fois en mode responsive (mobile), comment puis-je faire pour que le textarea soit considéré comme un block dur ?
Car actuellement, une fois en responsive, les autres select du form se placent SUR le textarea au lieu d'aller proprement à la ligne...

Voici la partie de mon CSS pour mobile :

(...)
	}
	.row {
		width : 99%;
    }
    .row > div {
		margin : 1% 1%;
	}
	.w-1, .w-2, .w-3, .w-4, .w-5, .w-6, .w-7, .w-8, .w-9, .w-10, .w-11, .w-12 {
		width : 98%;
		float : none;
	}
(...)

Bonjour.

En fait, j'ai du mal à visualiser votre problème. Ici, beaucoup postent leur code sur Codepen ou Jsfiddle, de ce fait il est plus facile de comprendre d'où vient le problème et comment le résoudre. Dans votre premier post, j'avais l'ensemble du HTML et l'ensemble du CSS, un simple copier-coller me permettait de recréer votre page.

Sinon pour transformer 'textarea' en 'block', rien de plus facile :

textarea
  {
  display : block;
  }

Mais est-ce que cela répond à votre question ?