Создание формы внутри div и попытка сохранить содержимое внутри - PullRequest
Новая
       0

Создание формы внутри div и попытка сохранить содержимое внутри

2 голосов
/ 26 января 2020

Я некоторое время пытался заставить это форматирование работать. Я нашел так много близких примеров того, что я хочу, но я просто не могу понять, как это правильно.

Я пытаюсь получить форму, которая "всплывала бы" через JS, чтобы кто-то мог ее заполнить. в. У меня нет проблем с JS и другими стилями, поэтому я сократил это до самого базового c примера, который я могу, который все еще иллюстрирует то, что я пытаюсь сделать.

У меня есть область заголовка, которая имеет «имя» и «описание» для заполнения и, что наиболее важно, может иметь несколько других динамически добавляемых полей. Область заголовка может увеличиваться на поле или два, поэтому высота точно не определена. Я хочу, чтобы остальная часть формы (прокручиваемый список) увеличивалась или уменьшалась в зависимости от добавленного содержимого заголовка.

Я прочитал так много ответов / предложений и попробовал, display: flex; дисплей: стол; и дисплей: сетка; и ничто из того, что я делаю, кажется, не работает правильно.

Я думаю, что мне просто не хватает чего-то маленького (или нет), я сейчас нахожусь в тупике и потратил несколько дней, просто пытаясь выполнить эту форму .

Вот моя базовая форма c без всех моих попыток, и все, что я хочу сделать, - это прокрутить «форму-детали» в оставшееся пространство «контейнера». Я знаю, что смогу заставить его работать, если я жестко закодирую высоту, однако, как я уже говорил выше, это также может динамически добавлять дополнительный контент в «form-header», поэтому высота «form-header» не известно.

По сути, мне просто нужно, чтобы розовая область оставалась в зеленой зоне (и прокручивалась) с динамической c высотой синей области (два необязательных поля могут скрываться и отображаться в зависимости ...).

Вот CSS

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
}

Вот HTML

<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>

Fiddle: (https://jsfiddle.net/logan5_42/nz418o9d/14/)

Ответы [ 5 ]

3 голосов
/ 26 января 2020

Если вы хотите использовать оставшуюся высоту контейнера, вы можете использовать следующий способ: 

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow: hidden;
   display: table;
}
form {
  display: table-row-group;
   height: 100%;
}
.title {
   margin-top:5px;
   display: table-row;
   width: 100%;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
   display: table-row;
    width: 100%;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
   display: table-row;
    width: 100%;
    height: 100%;
}
.content-wrapper {
  width:100%;
  height:100%;
  position:relative;
}

.content {
  overflow-y:auto;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
    <div class="content-wrapper">
      <div class="content">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      </div>
    </div>

    </div>
  </form>
</div>
0 голосов
/ 26 января 2020

Я изменил ваше демо и исправил его; Вы должны добавить overflow: hidden к container и добавить c height к form-detail. 

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow: hidden;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
   height: 140px;
}
<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>
0 голосов
/ 26 января 2020

Вам просто нужно изменить CSS для класса контейнера, оставьте его таким: 

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   height: 400px;
   background-color: lightgreen;
   text-align: center;
   overflow-y: scroll;
}

Я добавляю еще несколько строк на тот случай, если вам не понравится эта полоса прокрутки по умолчанию, вы можно легко настроить это, здесь вы go .. 

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
0 голосов
/ 26 января 2020

Удалите высоту: 400px из класса контейнера и добавьте минимальную высоту, как показано ниже. Похоже, это может помочь с вашей проблемой. 

.container {
   position:absolute;
   left:50px;
   top: 50px;
   width: 400px;
   min-height: 200px;
   background-color: lightgreen;
   text-align: center;
}
.title {
   margin-top:5px;
}
.form-header {
   padding-bottom:10px;
   margin: 5px 5px 5px 5px;
   border-bottom: 2px solid black;
   background-color: lightblue;
}

.form-header input, textarea  { 
   width: 95%;
}

.form-detail {
   margin: 5px 5px 5px 5px;
   background-color: pink;
   overflow-y: scroll;
}
<div class="container">
  <form>
    <div class="form-header">
      <div class="title">Name</div>
      <div><input type="text"></div>
      <div class="title">Description</div>
      <div><textarea type="text" rows="5"></textarea></div>
      <div class="title">Optional 1</div>
      <div><input type="text"></div>
      <div class="title">Optional 2</div>
      <div><input type="text"></div>
    </div>
    <div class="title">List</div>
    <div class="form-detail">
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </form>
</div>
0 голосов
/ 26 января 2020

Добавить overflow-y: auto; к .container

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...