Le problème est essentiellement que chaque fois que j'ai ce formulaire affiché sur un téléphone mobile, quand je vais saisir du texte dans le formulaire, le textarea se développe trop et va sur le bouton Envoyer et le pied de page. lorsque je clique en dehors de la zone de texte, il reste étendu, mais le bouton de soumission et le pied de page retournent à leur place en dessous de la zone de texte. Qu'est-ce que je fais mal? J'ai fourni ici le html et le css. Qu'est-ce qui pourrait causer une telle situation et comment puis-je y remédier?J'ai un problème avec mon formulaire de contact débordant lorsqu'il est affiché sur un mobile
Tout ce que je veux c'est de rester d'une taille raisonnable. Il ne semble pas avoir de problème lorsqu'il est chargé sur un bureau. Cela semble seulement se produire sur les téléphones mobiles.
CECI EST LE HTML
<!DOCTYPE html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head>
<body>
<form action="success.php" method="POST" onSubmit="return validateTextbox();" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit"> Full Name:
<input id="fullname" name="name" type="text" value="" size="40" placeholder="First and Last Name" />
<br>
<br> Your Email:
<input id="youremail" name="email" type="email" value="" size="40" placeholder="Enter your Email" />
<br>
<br>
<!--How do you want your transcript?<br><br>
<input type="radio" name="transcript_type" value="verbatim"/>Verbatim
<input type="radio" name="transcript_type" value="non_verbatim"/>Non- Verbatim
<input type="radio" name="transcript_type" value="unknown"/>Don't Know Yet<br><br>-->Your Message:
<br>
<br>
<textarea id="messageArea" name="message" rows="40" cols="80" placeholder="Enter your message here (10 character minimum.)"></textarea>
<br>
<input type="submit" value="Submit" onclick="return val();" /> </form>
</body>
</html>
CECI EST LE CSS
body {
background-color: black;
}
form {
/*border-style: solid;
border-right-style: none;
border-left-style: none;*/
padding-top: 100px;
text-align: center;
width: 100%;
background-size: cover;
background-image: url(images/starbright_avw.png);
margin-top: 20px;
color: white;
}
label {
font-family: impact;
}
/*
text-align: center;
margin-top: 40px;*/
input[type="submit"] {
height: 50px;
border-radius: 5px;
border-style: solid;
border-color: black;
color: black;
margin-bottom: 50px;
margin-top: 10px;
}
.row {
margin-top: 20px;
}
p.message {} p.yourMessage {
font-family: impact;
color: blue;
}
Pourriez-vous également fournir une capture d'écran? –
http://i63.tinypic.com/w7yhio.png et http://i66.tinypic.com/2n7jtpy.png Voilà à quoi ressemble le formulaire sur les téléphones portables après avoir commencé à y entrer du texte. – Shutter
Il semble que si vous lui donnez une hauteur fixe comme 'height: 686px', il ne sera pas dépensé. Je suis toujours en train de regarder ça. –