Проблема с входным параметром autosize и его соседом

Question

Привет См. Ссылку ниже.

https://jsfiddle.net/bigevent/t8xukung/

<div class="parent"> 
<div class="child-a"> 
    <input type="text" name="name" value="" class="name" placeholder="Name:" data-autosize-input='{ "space": 40 }' /> 
</div> 
<div class="child-b"> 
    <input name="email" placeholder="Email:" class="email"> 
</div> 

Я сделал два входа бок о бок. Первый (имя) изменяет размер в зависимости от длины текста. Вторая (электронная почта) имеет минимальную ширину, поэтому, когда имя становится более 50%, электронное письмо переходит к следующей строке. И я нахожу два вопроса.

Первый вопрос заключается в том, что, когда ввод электронной почты перемещается вниз, он не покрывает всю ширину и остается равным 50%, что является его минимальной шириной. Есть ли способ исправить это, чтобы электронная почта охватывала всю ширину, когда она движется вниз.

Вторая проблема заключается в том, что имя становится длиннее родительской границы, оно выходит за рамки. Есть ли способ остановиться внутри родителя?

Вы можете видеть на картинке ниже, на что похоже, когда вы становитесь шире родителя, а электронная почта не охватывает всю ширину.

спасибо.

Answer 1

OK это хак, так как мы не хотим, чтобы редактировать Autosize Plugin

Добавить в CSS

.big { 
    width:100% !important; 
    clear:both; 
} 
.big > input{ 
    width:100% !important; 
} 

Добавить в JS

setInterval(function(){ 
    if($('.child-a > input').width()>$('.child-a').parent().width()/2){ 
    $('.child-a,.child-b').addClass('big'); 
    }else{ 
    $('.child-a,.child-b').removeClass('big'); 
    } 
},200); 

Забудьте о медиа-запросах, которые они работают, когда вы изменяете размер или показываете свой webapp на разных высотах и ​​ширине устройства.

Answer 2

Использование CSS @media запросов

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 

    input.email{ 
     width:100% !important; 
    } 
} 

Это будет выполняться, когда ширина устройства составляет от 320-480 пикс все общие телефоны должны охватывать, что, в противном случае вы можете сделать, когда вы тянете и изменить размер вашего браузер.

@media only screen and (min-width : 320px) and (max-width : 480px) {} 

Они называются запросы средств массовой информации CSS и вы можете прочитать о них здесь W3schools