How to arrange div elements in dash frame work

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import mysql.connector
from sqlite3 import Error
conn = mysql.connector.connect(
    host='localhost',
    user='root',
    password='aparna',
    database='vehicledata1'
)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

meta_tags = [{'name': 'viewport', 'content': 'width=device-width, initial-scale=1'}]

cursor = conn.cursor()
cursor.execute("SHOW TABLES")
tables = [table[0] for table in cursor.fetchall()]
app.layout = html.Div([
    html.H1('Dashboard'),
    html.Div(
        className='container',
        children=[
            html.Div(
                className='table-container',
                children=[
                    html.Div(
                        className='table-radio-buttons',
                        children=[
                            dcc.RadioItems(
                                id='table-selection',
                                options=[{'label': table, 'value': table} for table in tables],
                                value=tables[0] if tables else None,
                            )
                        ]
                    )
                ]
            ),
            html.Div(
                id='card-container',
                className='card-container',
                children=[
                    html.Div(id='card', className='card')
                ]
            )
        ]
    )
])


@app.callback(
    Output('card', 'children'),
    Input('table-selection', 'value')
)
def update_card(table_name):
    if not table_name:
        return ''
    query = f"SELECT * FROM {table_name}"
    cursor.execute(query)
    data = cursor.fetchall()
    df = pd.DataFrame(data, columns=[col[0] for col in cursor.description])
    df = df[(df['IGN'] == 'On') & (df['GPS'] == 'On')]
    df2 = df.drop_duplicates(subset=['Odometer'])
    df1 = df2[df2['Odometer'] != 0]
    df1["Odometer"] = df1["Odometer"].diff()
    df3 = df1.groupby(df1.date_time.dt.date)['Odometer'].sum()

    result = df3.sum() / len(df3) * 0.001
    formatted_num = "{:.2f}".format(result)

    card_content = html.Div(
        className="result-card",
        children=[
            html.H4("Average Km/day", className="card-title"),
            html.H3(formatted_num, className="card-value")
        ]
    )
    return card_content

if __name__ == '__main__':
    app.run_server(debug=True, port=5656)

i have this code iam new to dash frame work iam unable to arrange the div elements this is the response iam getting


i want to arrange my table container to left end side how to do it here is my css file

.wrapper {
  margin: 0 auto;
  padding: 20px;
}

.card {
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 15px;
  width: 200px;
    flex-direction: column;
  justify-content: space-between;
    align-items: flex-start;
}

.table-container {
  display: flex;
  flex-direction: column;
}

.table-radio-buttons {
  width: 20rem;
}

body {
  font-family: sans-serif;
}

h2, h3, h4, h5, h6 {
  color: hotpink;
}

.container {
  display: flex;
  justify-content: flex-start;
}

.card-container {
  margin-left: 100px;
}

.result-card {
  margin-bottom: 30px;
}

Hello @aparna1 !

I see you are using dash bootstrap components already so check out it’s layout components (Row and Col). You should be able to arrange the layout in any way you want with it.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

1 Like