Dash Lumino with Dash Design Kit

Dash Python
1

Hello dash community,

I am trying to use Dash lumino within a ddk.App but it is not displaying correctly.
The lumino components are actually loading but they are squashed after the footer - see below screenshot & code.

Do you have any idea why this is happening and how i could solve for it?

Thanks ! :slight_smile: :grinning:

Arthur

image
image3781×1954 324 KB 

import dash_lumino_components as dlc
import dash
from dash.dependencies import Input, Output, State, MATCH
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import random
import dash_design_kit as ddk


external_stylesheets = [
    'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css',
    'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'
]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


def get_test_div(widgetid):
    return html.Div([
        html.Label('Simple Widget'),
        dcc.Input(id={"type": 'my-input', "widget": widgetid},
                  value='initial value', type='text'),
        html.Br(),
        html.Div(id={"type": 'my-output', "widget": widgetid}),
    ])

app.layout = html.Div(
# app.layout =ddk.App(
    children=[       
    dlc.BoxPanel([
        dlc.SplitPanel([
            dlc.TabPanel(
                [
                    dlc.Panel(id="tab-A", children=html.Div([
                        dbc.Button("Open Plot", id="button2",
                                   style={"width": "100%"})
                    ]), label="Plots", icon="fa fa-bar-chart"),
                    dlc.Panel(id="tab-B", children=html.Div("Dummy Panel B"),
                              label="", icon="fa fa-plus"),
                    dlc.Panel(
                        id="tab-C", children=html.Div("Dummy Panel C"), label="Test"),
                ],
                id='tab-panel-left',
                tabPlacement="left",
                allowDeselect=True),

            dlc.DockPanel([
                dlc.Widget(
                    "test", id="initial-widget", title="Hallo", icon="fa fa-folder-open", closable=True, caption="akjdlfjkasdlkfjsajdf"
                ),
                dlc.Widget(
                    "test", id="initial-widget2", title="Hallo", icon="fa fa-folder-open", closable=True, caption="akjdlfjkasdlkfjsajdf"
                )
            ], id="dock-panel", ),

            dlc.TabPanel(
                [
                    dlc.Panel(id="tab-D", children=html.Div([

                        html.Div("start", id="tab-D-output")
                    ]), label="Plots", icon="fa fa-bar-chart")
                ],
                id='tab-panel-right',
                tabPlacement="right",
                allowDeselect=True)

        ], id="splitPanel")
    ], "boxPanel", addToDom=True,)
    ],
)

if __name__ == '__main__':
    app.run_server(debug=True,port=8082)
1 Like
2

I facing same problem

3

This is an enterprise feature, you could contact the dash help directly. :raised_hands: @adamschroeder

1 Like
4

hi @wowwwn
Are you a Dash Enterprise user?

5

No, I am not an Enterprise user.

1 Like
6

I replaced dash_lumino with dash_flexlayout to solve the issue where dash_lumino components (such as menu, dockPanels, etc.) always get created under the html footer when used with other components.