Entire div clickable with CSS

Question

I'm using dropzone.js for Ajax uploading of images. The problem is that I have the following div containers

<div id="images-container" class="ui-sortable dz-clickable">
  <div id="file-image">
    <p><b>Add images</b></p>
    <small>Click or drag&drop here</small>
  </div>
</div>

And dropzone.js is initialised as follows:

$("#file-image").dropzone();

My css is looking like this:

#file-image {
  border: 1px solid rgb(187, 187, 187);
  background: rgb(247, 247, 247);
  box-sizing: border-box;
  float: left;
  display: block;
  position: relative;
  z-index: 20;
  cursor:pointer;
}

The problem is that when I click on the text (Add images or Click or drag & drop.) the plugin cannot be activated. How can I make the entire #file-image div clickable?

Answer 1

I've changed your div to a form and added an action and it seems to be working fine.

HTML

<div id="images-container" class="ui-sortable dz-clickable">
  <form action="/action" id="file-image" class="dropzone">
    <p><b>Add images</b></p>
  </form>
</div>

This an extract from the official website - "Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute."

So I think you need to use the action attribute to get it to work.

Codepen - https://codepen.io/anon/pen/aGKBgY