question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Writing standard style tag in html rather than using dropzone.style() method

See original GitHub issue

Compare the following two writing styles of customizing the style for dropzone area:

<style>
.dropzone {
    border: 2px dashed #0087F7;
    margin: 10%;
    min-height: 400px;
}
</style>
{{ dropzone.style('border: 2px dashed #0087F7; margin: 10%; min-height: 400px;') }}

The first one (standard style tag) has two pros:

  • more readable and maintainable, while the second one looks sort of ugly.
  • more flexible on customizing different styles for multiple dropzones on one page, just replacing .dropzone to #<dropzone-id>, while the second one cannot realize.

Thus, I think the dropzone.style() method is unnecessary, and I suggest writing the standard style tag for customizing the style.

What do you think?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
yuxiaoy1commented, May 12, 2021

OK I’ll create a PR later.

0reactions
greylicommented, May 15, 2021

Well done! I will review them tomorrow, thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Style Information element - HTML - MDN Web Docs
This attribute defines which media the style should be applied to. Its value is a media query, which defaults to all if the...
Read more >
Styling an input type="file" button - html - Stack Overflow
Using this technique, you can easily style a click / drop zone for the user, and add custom class in javascript on dragenter...
Read more >
HTML Drag and Drop API - W3Schools
In HTML, any element can be dragged and dropped. ... setData() method sets the data type and the value of the dragged data:...
Read more >
Create a drag-and-drop with react-dropzone - LogRocket Blog
Learn how to use react-dropzone to create a drag-and-drop component for uploading images. Compare this to the HTML Drag and Drop API method....
Read more >
3.2 Elements — HTML5 - W3C
3.2 Elements. 3.2.1 Semantics. Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found