Значок Font Awesome перемещается по полю ввода с изменением размера окна - PullRequest
Новая
       26

Значок Font Awesome перемещается по полю ввода с изменением размера окна

0 голосов
/ 29 марта 2020

Новый css. Создание страницы, реагирующей на изменение размера. У меня есть поле ввода формы, которое центрируется и остается в этой позиции при изменении размера страницы. Однако fa-иконка не удерживает свою позицию и перемещается по полю ввода. Я попытался установить левый параметр в качестве% и поигрался с настройками медиазапроса, но не могу его закрепить.

html: 

<code><body>

 <div id="wrap">
 <div id="main">

<form action="index.php" method="post" id="srchForm" autocomplete="off"><pre>

<div class="inputWithIcon">
  <input name="msg" id="search" type="text" autofocus value= ""></input> 
 <i class="fa fa-search"></i>
<div id="error"></div> 
</div>

css: 

* {
  margin: 0;
  padding: 0;
}

html, body {
height: 100%;
}

#wrap { 
   width: 960px;
   min-height: 100%;
   margin-left: auto;
   position: relative;
   margin-right: auto;
}

#main{
    overflow: auto;
    padding-bottom: 30px;
}

#srchForm {
  text-align: center;
  margin-top: -30px;
  height: 140px;
  width: 100%;
}

input:focus, select:focus {
    outline:none !important;
}

input[type=text] {
  position: center;
  width: 480px;
  height: 45px;
  padding: 12px 20px;
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.6;
  box-sizing: border-box;
  border-style: solid;
  border-radius: 40px;
  border-width: 1px;
  border-color: #E8E8E8;
  color: #484848;
}

.inputWithIcon input[type=text]{
  padding-left: 50px;
}

.inputWithIcon {
  position: relative;
  color: #E8E8E8;
}

i.fa.fa-search {
  position: absolute;
  font-size: 19px;
  left: 35%;
  top:36%;
}

@media screen and (max-width: 959px){
  #wrap{
    width:100%;
  }

}

Моя скрипка: https://jsfiddle.net/hzqLburo/

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Посмотрите на этот код: https://jsfiddle.net/k6pcrL79/3/

<form action="#">

  <div class="input">
     <i class="fa fa-search"></i>
     <input type="text">
  </div>
</form>

.input{
  display:flex;
  justify-content:center;
}

.input input{
  width:200px;
}

.input i{
  margin-right:20px;
}

Это то, что вы хотите?

1 голос
/ 29 марта 2020

В вашем примере fa-icon удерживает позицию. Похоже, что нет, но это имеет место. Ваша проблема - ваш фиксированный размер ввода. Вы должны использовать% или VW единиц вместо px. Для отзывчивых это необходимо. Однако вы должны использовать flexbox для этого, а не абсолютную позицию. Подожди, я отправлю тебе код

...