У меня проблема с переполнением моей контактной формы при отображении на мобильном -- html поле с участием css поле с участием forms поле с участием footer поле с участием contact пол Связанный проблема

I'm having an issue with my Contact Form overflowing when displayed on a mobile


0
vote

проблема

русский

Выпуск в основном, когда у меня есть эта форма, отображаемая на мобильном телефоне, когда я перехожу на ввод текста в форму, Textarea слишком много расширяется и переходит на кнопку отправки и нижний колонтитул. Когда я нажимаю за пределами Textarea, он остается расширенным, но кнопка «Отправить и нижний колонтитул вернуться к своим местам» ниже Textarea. Что я делаю не так? Я предоставил здесь HTML и CSS. Что может вызвать что-то подобное, и как я могу это исправить?

Все, что я хочу, чтобы остаться разумным размером. Похоже, нет никакой проблемы при загрузке на рабочем столе. Это, кажется, происходит только на мобильных телефонах.

Это 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>   

Это 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; }   
Английский оригинал

The issue is basically that whenever I have this form displayed on a mobile phone, when i go to input text into the form, the textarea expands too much and goes over the Submit button and the footer. when i click outside of the textarea, it stays expanded, but the submit button and footer return to their places below the textarea. What am I doing wrong? I've provided here the html and the css. What is it that could cause something like that to happen and how can i fix it?

All i want it to do is stay a reasonable size. It doesn't seem to have any issue when loaded on a desktop. It only seems to happen on mobile phones.

THIS IS THE 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> 

THIS IS THE 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; } 
</div
              
     
     

Список ответов

0
 
vote

Я думаю, что это может быть вызвано увеличением просмотра мобильных веб-сайта. После того, как вы введите любой символ в текстуарее, увеличение уровня просмотра мобильных устройств увеличит бы высоту линии на 10px, что увеличивает высоту текстовой ограждения Colls * 10px. В вашем коде он растет еще 400 пикселей. У меня есть два решения для этого.

  1. Настройка фиксированной высоты для текстура. Что касается вашей ситуации, вы можете установить высоту Textarea в <Код> Intent alarmIntent = new Intent(this, AlarmReceiver.class); pendingIntent = PendingIntent.getBroadcast(this, 0, alarmIntent, 0); manager = (AlarmManager)getSystemService(Context.ALARM_SERVICE); manager.cancel(pendingIntent); 4 * <Код> Intent alarmIntent = new Intent(this, AlarmReceiver.class); pendingIntent = PendingIntent.getBroadcast(this, 0, alarmIntent, 0); manager = (AlarmManager)getSystemService(Context.ALARM_SERVICE); manager.cancel(pendingIntent); 5 . Скажите, что ваша линейка - высота текста - 18 шток и <код> Intent alarmIntent = new Intent(this, AlarmReceiver.class); pendingIntent = PendingIntent.getBroadcast(this, 0, alarmIntent, 0); manager = (AlarmManager)getSystemService(Context.ALARM_SERVICE); manager.cancel(pendingIntent); 6 , вы можете установить <код> Intent alarmIntent = new Intent(this, AlarmReceiver.class); pendingIntent = PendingIntent.getBroadcast(this, 0, alarmIntent, 0); manager = (AlarmManager)getSystemService(Context.ALARM_SERVICE); manager.cancel(pendingIntent); 7 .

  2. Вы можете добавить:

    <Код> Intent alarmIntent = new Intent(this, AlarmReceiver.class); pendingIntent = PendingIntent.getBroadcast(this, 0, alarmIntent, 0); manager = (AlarmManager)getSystemService(Context.ALARM_SERVICE); manager.cancel(pendingIntent); 8

и установить ширину Textarea на 100%.

 

I think this might be caused by the mobile website viewport zooming. Once you type any character in the textarea, the mobile viewport zooming would enlarge the line-height by 10px, which increases the height of the textarea by cols * 10px. In your code, it grows another 400px. I have two solution for this.

  1. Setting a fixed height for the textarea. As to your situation, you can set the height of the textarea to cols * line-height. Say your line-height of the text is 18px and cols="40", you can set height:18*40=720px;.

  2. You can add:

    <head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head>

and set the width of the textarea as 100%.

</div
 
 

Связанный проблема

0  Список списка с двумя столбцами в JSP  ( List box with two columns in jsp ) 
Коробка в списке с двумя столбцами в JSP, а также можно ли сортировать порядок двух столбцов, таких как восходящий или нисходящий, на основе требований каждог...

1  Удалить таблицу TR при сохранении AddClass  ( Remove table tr while maintaining addclass ) 
Хорошо, у меня есть таблица TR, которая удаляется, когда вы нажимаете кнопку. Я использую Animate.css и хотел бы добавить класс после того, как мой запрос AJA...

0  Скрывая неупорядоченный список, когда у него нет элементов  ( Hiding an unordered list when it has no elements ) 
У меня есть проблема, которая кажется сначала, как общий язык No-Brainer и легкая задача. У меня есть плагин JavaScript на моей странице, который генерирует...

6  Предотвращение подачи двойной формы [дубликат]  ( Preventing double form submissions ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli)  ( Send html form data to sql database via php using mysqli ) 
Я хочу отправить данные, введенные в HTML-форму в мою базу данных SQL, то есть создайте новую строку, приписываю определенные значения в определенные столбцы....

1  Я создал выпадающий список, и он не перейдет на вершину экрана?  ( I created a drop down list and it wont move to the top of the screen ) 
Эй, я начинающий HTML & AMP; CSS и я не смог найти решение для моей проблемы Я пытался много раз исправить, добавив разные позиции, но это просто разрушает ег...

0  Динамический расчет расстояния для маршрута  ( Dynamic distance calculation for route ) 
Я хочу реализовать форму, где вы вводите отправку и пункт назначения, а затем, используя API Google Maps JavaScript, он будет отображать расстояние в виде зна...

6  Нет прокрутки после закрытия лайтбокса (Blueimp)  ( No scrolling after closing lightbox blueimp ) 
Я построил свой собственный сайт и хотел добавить разные галереи, поэтому я попробовал Blueimp. Он отлично работает, но когда я закрываю лайтбокс, я больше не...

-1  Перемещение и переименование загруженного файла  ( Moving and renaming an uploaded file ) 
Извините, если это легко, но я немного нового для программирования, поэтому у меня проблемы с переименованием временного загруженного файла. Вот мой код: ht...

1  Почему это представляет действие, не работаю с PHP ISSET?  ( Why this submit action dont work with php isset ) 
У меня есть этот код, является зарегистрируем HTML с действием PHP при нажатии кнопки «Отправить» <код> <html> <head> <title>Pruebas de registro </title...

0  Как сделать раскрывающееся меню горизонтальное  ( How to make a drop down menu horizontal ) 
Я не уверен, что это возможно, но у меня есть кнопка, называемая фруктами. Когда я нажимаю на него, 4 фруктовые кнопки появляются вертикально вниз, но я хочу,...

3  Как поставить DIV в центре другого дивы?  ( How to put a div at center of another div ) 
Я хотел бы иметь один div в центре другого div горизонтально. <код> <div id="container"> <div id="centered"> hello world; </...

0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT  ( Convert gnome help yelp xml to static html with xslt ) 
Некоторые из приложений GNOME на Linux используют браузер справки под названием <код> yelp . Например, Gnome-Calculator, <Код> gcalctool , имеет свои файлы сп...

1  Как нажать на изображение, чтобы показать изображения с функцией  ( How to click on an image to show images with a function ) 
Попытка нажать на Magic8, но счастливые, грустные и удивленные картинки не будут отображаться ниже линии. Что я сделал не так? Я сохранил изображения в Random...

1  Добавление события onload для GridView  ( Adding an onload event for a gridview ) 
У меня есть одна сетка, вот HTML-код: <код> <table cellspacing="0" border="1" style="border-collapse:collapse;" id="grid1" rules="all"> <tbody><t...

Связанный проблема

0  Список списка с двумя столбцами в JSP 
1  Удалить таблицу TR при сохранении AddClass 
0  Скрывая неупорядоченный список, когда у него нет элементов 
6  Предотвращение подачи двойной формы [дубликат] 
13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli) 
1  Я создал выпадающий список, и он не перейдет на вершину экрана? 
0  Динамический расчет расстояния для маршрута 
6  Нет прокрутки после закрытия лайтбокса (Blueimp) 
-1  Перемещение и переименование загруженного файла 
1  Почему это представляет действие, не работаю с PHP ISSET? 
0  Как сделать раскрывающееся меню горизонтальное 
3  Как поставить DIV в центре другого дивы? 
0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT 
1  Как нажать на изображение, чтобы показать изображения с функцией 
1  Добавление события onload для GridView 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.