Add option to set parent element as <input> element container #204
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hello,
First off a big thanks to anybody contributed to this great plugin.
WHAT PROBLEM DOES THIS PR SOLVE?
There would be some situation where the upload button could be really large like what we have in our app https://cl.ly/0M3Y1e313Z3v . When user scrolls, the transparent element covers the whole sticky nav bar, so a click on nav bar buttons, opens the uploader instead.
Additionally I can see some situations where upload button is positioned fixed or is on a sticky parent, then scrolling the page would move the element which is positioned relative to document element while button is still in the sticky position.
SOLUTION:
Adding two new options:
relativeToParentandinputZIndexBecause the element is added to the body(with a huge z-index), there is no workaround to fix problems mentioned above except having the element added on the parent element of the button(s).
This way the position and z-index of the upload element is bound to the parent of button, or closest ancestor of all upload buttons on the screen.
CHANGES:
Expose 2 new config params through the API to set container for file input elements (document by default) and Z-Index:
relativeToParent: OPTIONAL BooleanFalse (default): Use document element as the container for the file element
True: Use parent element or a common ancestor for all upload buttons as the container for the file element
inputZIndex: OPTIONAL Number -Explicitly set Z-Index of file input elements added to DOM. Default: 16777270
NOTE:
Docs have NOT been updated, but I didn't want to do that until I knew whether or not this PR might be accepted.
I have tested the code in many situations and we are currently using it in a production webapp. Everything is working as expected without any problem.
I really appreciate if you merge it back in master branch.
Thank you!
Behzad.