Авторазмер div по содержимому

487

28 апреля 2017, 17:04

Доброго времени суток. Столкнулся с такой проблемой.

У меня есть вот такой код:

<div class="dialog">
 <input type="text" value="Title" class="title">
 <input type="text" value="Message" class="message">
 <div class="button" style="text-align: center;">
  <input type="button" value="Yes"> <input type="button" value="No">
 </div>
/div>

Мне нужно чтобы блок Dialog автоматически растягивался под размер существующих inputов внутри.
Даже когда сами input изменяются пользователем.

Примечание:
<input class="title"> - без переноса строк (white-space: nowrap;)
а <input class="message"> - с переносом (white-space: pre-wrap;)

.dialog {display: inline-block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}

Перерыл всё, похожего не нашёл..

Answer 1

попробуйте так

.dialog {
      background: #000;
    display: inline-table;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0;
    margin: auto;
}

Answer 2

$(".addBut").click(function() { 
  $(".dialog").append("<input type='text' value='neweOne'/>"); 
})

.dialog { 
  background-color: black; 
  display: inline-block; 
  position: absolute; 
  margin: auto; 
  width: 50%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="dialog"> 
  <input type="text" value="Title" class="title"> 
  <input type="text" value="Message" class="message"> 
  <div class="button" style="text-align: center;"> 
    <input type="button" class="addBut" value="Yes"> 
    <input type="button" value="No"> 
  </div> 
</div>

Это не совсем ответ, просто попытка помочь. Как видно из примера - я использую тоже самое, что написали вы. Но блок спокойно расширяется в высоту, когда я добавляю в него новые инпуты (кнопка Yes). Поэтому просьба уточнить что именно не работает.

Answer 3

удалите left: 0; top: 0; right: 0; bottom: 0 они его растягивают и margin: auto; тут не уместно так как это position: absolute

хотя left: 0; top:0 можно оставить