search

fohrloop / dash-uploader

The alternative upload component for python Dash applications.
MIT License
144 stars 30 forks source link

width problems in mobile mode #19

Closed fohrloop closed 3 years ago

fohrloop commented 3 years ago

ref: https://community.plotly.com/t/how-to-show-a-progress-bar-for-uploading-a-file-using-dash-upload/48988/5

Expected outcome

image

Actual outcome

image

Code to reproduce

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()
fohrloop commented 3 years ago

Seems that there is an input element that makes the screen wider.

image

For some reason, the component has finite width (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:

                            style={{
                                'opacity': '0',
                                'width': '0',
                                'height': '0',
                                'position': 'absolute',
                                'overflow': 'hidden',
                                'zIndex': '-1',
                            }}

Everything works as intended:

image