Dropzone.Js with Collapsible Nav Bar shows "Browse" button on collapse.
Dropzone.js on bootstrap page with collapsible left sidebar shows the "Browse" link when the nav bar is collapsed. Inspecting it shows the HTML inserted by the dropzone js, but the positions of the element have changed and the hidden attribute of the element is ignored. This places the element under my collapsed nav bar. See attached. Otherwise, all works as expected.
Here is the HTML from the inspect:
Here is the HTML from the inspect:
<a class="file-input-wrapper btn dz-hidden-input">Browse<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 21px; left: 59px; height: 0px; width: 0px;"></a>
"Browse"
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 21px; left: 59px; height: 0px; width: 0px;">ASKER
The inline is created by Dropzone's js. I am invoking Dropzone by simply calling it's form command with parameters, so I have no control over how that is occurring.
The dropzone element is in a form in a div and is at the bottom of the page.
The dropzone element is in a form in a div and is at the bottom of the page.
Yes you can control it, Dropzone have CSS and Javascript code that you can edit.
Always do a full backup first, and make sure you are using the latest version.
https://github.com/enyo/dropzone
Also you can use the Dropzone Bootstrap theme.
Not sure which BS and Dropzone version you are using but this is easy to change.
Always do a full backup first, and make sure you are using the latest version.
https://github.com/enyo/dropzone
Also you can use the Dropzone Bootstrap theme.
Not sure which BS and Dropzone version you are using but this is easy to change.
ASKER
lenamtl, this button is inserted by the default coding of Dropzone plugin. Are you suggesting I completely rewrite their code?
Not rewrite but just adapt it to your need ...
Can you set up a JSfiddle so we can see what the problem is or do you have a live link
Can you set up a JSfiddle so we can see what the problem is or do you have a live link
ASKER
To difficult to emulate in jfiddle.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I'm not so sure what the problem is but please do not use inline CSS as it won't play well with Bootstrap CSS and probably break it.
Do not use :
Open in new window
Instead, create a class inside your custom css file and make sure to place the link of the file under the Bootstrap CSS and add your class to the element.follow Bootstrap grid https://getbootstrap.com/docs/4.3/layout/overview/
and element https://getbootstrap.com/docs/4.3/components/forms/
I would not recommend to put your button and your form inside a collapsible div as it is not userfriendly
Instead
Put the form and the button on the page.
Put them inside a Div container / column
Put your input into a form