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?

Check this question if u haven't already https://stackoverflow.com/questions/22181487/how-to-make-only-the-dropzone-js-previews-div-clickable-and-not-the-whole-form — IbraHim M. Nada, May 13 '18 at 06:40
check out this https://stackoverflow.com/questions/50306158/prevent-html-text-to-distort-clickable-overlay/50306191#50306191 — patelarpan, May 13 '18 at 06:44
@patelarpan it works. #file-image p, #file-image small{ pointer-events: none; } — ROZZ, May 13 '18 at 06:51
Check this sample, you need a form instead of div: https://codepen.io/blackjacques/pen/jyxNqL — Hooman Bahreini, May 13 '18 at 06:54

score 1 · Answer 1 · answered May 13 '18 at 06:46

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

I already have
so I want to stick to it. I don't need another one. — ROZZ, May 13 '18 at 06:48

Entire div clickable with CSS

1 Answers1