Задать вопрос
etozhetisachniy
@etozhetisachniy
html

Почему input работает некорректно на всем поле?

Всем привет!
Проблема при клике на поле input, не кликабельно после placeholder, вообще не реагирует либо цепляет соседние поля.
Ниже в скрине
Желтый маркер это поле где не работает клик

Синий маркер это поле где работает корректно

P.S Все поля справа работают корректно
5a991907477f3569196860.png
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=2">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="testcss.css">
</head>
<body>
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">BeSafeReg</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="test.html">Version 1</a></li>
      <li><a href="index.html">Version 2</a></li>
      <li><a href="#">Version 3</a></li>
      <li><a href="#">Version 4</a></li>
    </ul>
  </div>
</nav>
<div class="container">
</div>

  <div class="jumbotron">
  <h1 align="center">Реєстрація подорожі</h1>
  </div>
  <br>
  <br>
  <br>
  <h3 align="center">Інформація про Вас</h3>
  <br>

  <div class="column1">
  <div class="container">
    <div class="form-group">
      <div class="col-md-4">
      <input type="text" class="form-control" id="fname" placeholder="Імя">
    </div>
    </div>
  </div>
  </div>
  <br>

    <div class="column2">
    <div class="container">
      <div class="form-group">
        <div class="col-md-4">
      <input type="text" class="form-control" id="lname" placeholder="Прізвище" name="lname">
    </div>
    </div>
  </div>
</div>
<br>
  
  <!--Заезжает на соседнюю панель-->
  <div class="column3">
  <div class="container">
    <div class="form-group">
      <div class="col-md-4">
      <input  type="text"  placeholder="Рік народження" class="form-control"  id="date" onfocus="(this.type='date')">
    </div>
    </div>
  </div>
  </div>
 <br>

  <div class="column4">
  <div class="container">
    <div class="form-group">
      <div class="col-md-4">
        <input type="text" class="form-control" id="email" placeholder="Email">
    </div>
    </div>
  </div>
  </div>
  <br>

  <div class="mobile1">
  <div class="container">
    <div class="form-group">
      <div class="col-sm-4">
        <input type="text" class="form-control" id="mobua" placeholder="Мобільний номер">
    </div>
    </div>
  </div>
  </div>
  <br>

  <div class="mobile2">
  <div class="container">
    <div class="form-group">
      <div class="col-sm-4">
        <input type="text" class="form-control" id="mobua" placeholder="Закордонний номер">
    </div>
    </div>
  </div>
  </div>
  <br>

  <h3 align="center">Маршрут</h3>







</body>
</html>

CSS
.column1 {
	transform: translate(190px,0px)
}

.column2 {
	transform: translate(610px,-55px)
}

.column3 {
	transform: translate(190px,-25px);
}

.column4 {
	transform: translate(610px,-80px);
}

.mobile1 {
	transform: translate(190px,-47px);
}

.mobile2 {
	transform: translate(610px,-102px);
}

  • Вопрос задан
  • 420 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
northfire
@northfire
у вас полностью не правильный код. не надо никаких 
.column2 {
  transform: translate(610px,-55px)
}


по факту вот как раз эти фиговины и наезжают на "соседей" и перекрывают ваши левые инпуты

5a9922cf84475448712293.png

вариант пофиксить это- сделать нормальный код
Ответ написан
7 комментариев
7 комментариев
Пригласить эксперта
Ответы на вопрос 1
megafax
@megafax
web-программист 
<div class="form-group">
        <div class="col-md-4">

У Вас не на всю ширину получается input
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)
25 нояб. 2024, в 03:04
500000 руб./за проект
Сделать простой лендинг
25 нояб. 2024, в 02:45
2000 руб./за проект
Изображения на главную страницу в стиле Jetton и 1вин
25 нояб. 2024, в 00:22
12000 руб./за проект
Ещё заказы