Dropzone.js - Объединить с нормальной формой - спросить о позиционировании

Question

Я использую Dropzone и пытаюсь совместить его с нормальной формой, поэтому я прочитал этот учебник https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone и да, я могу сделать это успешно. Тем не менее, я хочу, чтобы другое текстовое поле ввода и кнопка отправки были вне тега формы (за пределами dropzone), поэтому я использую css position:absolute, чтобы текст был выше формы и кнопки отправки ниже формы

но я забыл, что если я выберу изображение, чтобы загрузить высоту dropzone формы, она будет расширяться. поэтому он терпит неудачу. (См скриншот)

<form id="my-awesome-dropzone" class="dropzone" style="position:relative"> 
    <div class="dropzone-previews"></div> 

    Username : <input type="text" name="username" style="position:absolute; top:-50px; left:0px; /> <br/> 
    Email: <input type="text" name="email" style="position:absolute; top:-40px;left:0px; /> <br/> 

    <button type="submit" style="position:absolute;top:100px;left:0px;">Submit data and files!</button> 
</form> 

Я даже пошевелиться кнопку внешней формы и использовать html5 атрибут form="my-awesome-dropzone", но это не работает. Как я могу это сделать?

Answer 1

Вы могли бы сделать это таким образом, отступы 20px в форме в нижней части, и добавить к buttonabsolute, bottom: 0px, и это будет в конце формы, даже если там загруженные изображения.

$(function(){ 
 
    Dropzone.autoDiscover = false; 
 
    
 
    var myDropzone = new Dropzone("#my-awesome-dropzone", { url: "/file/post"}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script> 
 
<link href="http://www.dropzonejs.com/css/dropzone.css" rel="stylesheet"/> 
 

 
<form id="my-awesome-dropzone" class="dropzone" style="position:relative; padding-bottom: 30px;"> 
 

 
    <input type="email" name="username" /><br> 
 
    <input type="password" name="password" /><br> 
 

 
    <div class="dropzone-previews"></div> 
 
    
 
    <button type="submit" style="position: absolute; bottom: 0px;">Submit data and files!</button> 
 
</form>

Answer 2

Я думаю, что ваша проблема кнопки наложения перекрытия наложения должна состоять из style="position:relative" и кнопки с style="position:absolute;top:100px;left:0px;". Удалите оба из них.