We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ref: https://community.plotly.com/t/how-to-show-a-progress-bar-for-uploading-a-file-using-dash-upload/48988/5
import dash import dash_bootstrap_components as dbc import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output, State import dash_uploader as du app = app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], meta_tags=[{'name': 'viewport', 'content': 'width=device-width, initial-scale=1.0'}]) server = app.server du.configure_upload(app, r"C:\tmp\Uploads") app.layout = dbc.Container([ dbc.Row([ dbc.Col( du.Upload(), ) ]), dbc.Row([ dbc.Col(html.Div( [ html.A("Click to open Modal", id="open", className="mr-1", style={'color': 'brown', 'cursor': 'pointer'}), dbc.Modal( [ dbc.ModalHeader(html.H4("Modal Header"), style={ 'color': 'red'}), dbc.ModalBody( ["Modal Body Text"]), dbc.ModalFooter( dbc.Button("Close", id="close", className="ml-auto") ), ], id="modal", centered=True, ), ], style={'text-align': 'center'} ), ) ]) ], style={'textAlign': 'center'}, fluid=True) def toggle_modal(n1, n2, is_open): if n1 or n2: return not is_open return is_open app.callback( Output("modal", "is_open"), [Input("open", "n_clicks"), Input("close", "n_clicks")], [State("modal", "is_open")], )(toggle_modal) if __name__ == "__main__": app.run_server()
The text was updated successfully, but these errors were encountered:
Seems that there is an input element that makes the screen wider.
For some reason, the component has finite width (src\lib\components\Upload_ReactComponent.react.js):
src\lib\components\Upload_ReactComponent.react.js
style={{ 'opacity': '0', 'width': '0.1px%', 'height': '0.1px%', 'position': 'absolute', 'overflow': 'hidden', 'zIndex': '-1', }}
I don't know why the width is 0.1px%. Maybe a typo? Putting the width and height to zero:
0.1px%
style={{ 'opacity': '0', 'width': '0', 'height': '0', 'position': 'absolute', 'overflow': 'hidden', 'zIndex': '-1', }}
Everything works as intended:
Sorry, something went wrong.
85fe8b2
No branches or pull requests
ref: https://community.plotly.com/t/how-to-show-a-progress-bar-for-uploading-a-file-using-dash-upload/48988/5
Expected outcome
Actual outcome
Code to reproduce
The text was updated successfully, but these errors were encountered: