I tried customizing the style element of dash-draggable, by changing background color to red, but it changed the background of entire window to red. The content style was retained as it is.
Here is the working minimal code:
import dash
from dash import html
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
import dash_draggable as ddg
app = dash.Dash(
__name__
, external_stylesheets=[dbc.themes.DARKLY]
)
id_index = "test"
grid = dag.AgGrid(
id={"type": "data_grid", "index": id_index}
, className="ag-theme-balham-dark"
, columnDefs=[
{'headerName': 'Name', 'field': 'name'},
{'headerName': 'Age', 'field': 'age'},
{'headerName': 'Country', 'field': 'country'},
{'headerName': 'Occupation', 'field': 'occupation'}
]
, rowData=[
{'name': 'John', 'age': 25, 'country': 'USA', 'occupation': 'Engineer'},
{'name': 'Sarah', 'age': 32, 'country': 'Canada', 'occupation': 'Teacher'},
{'name': 'David', 'age': 41, 'country': 'UK', 'occupation': 'Doctor'},
{'name': 'Emma', 'age': 29, 'country': 'Australia', 'occupation': 'Designer'},
{'name': 'Michael', 'age': 36, 'country': 'Germany', 'occupation': 'Manager'}
]
, columnSize="sizeToFit"
, defaultColDef=dict(filter=True, resizable=True, sortable=True)
, dashGridOptions=dict(undoRedoCellEditing=True, rowSelection="single", sideBar=dict(toolPanels=['columns', 'filters'], hiddenByDefault=False))
, style={"height": "100%", "width": "100%"}
, getRowId=f"params.data.name"
)
app.layout = ddg.ResponsiveGridLayout(
[
html.Div(
html.Div(
children=[
grid,
], id={"type": "grid_div", "index": id_index}
, style={"height": '100%', "width": '100%', "display": "flex", "flex-direction": "column", "flex-grow": "0", "background-color": "#2d3436", "padding": '0px 0px 0px 0px'}
), style={'height': '100%', 'width': '100%', 'display': 'flex', 'flex-direction': 'columns', 'flex-grow': '0'}
)
], style={"background-color": "red"}
)
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=5080)