Disposition of html.Div

Dash Python
1

Hello everyone,

I’d like to get three horizontal blocks in my current application. First block will contain one graph, the second one will contain two graphs and the third one only one again.

Apparently there’s something I’m not doing the right way. Here’s what I get on the second and third blocks:

image
image1712×866 68.2 KB

The “3D” appearing just below “Principle Component Analysis” should be displayed below the two graphs and centered. So as the “visualization” that we can see below the two graphs.

Could you tell me what I’m doing wrong?

Here’s the code I’m using. I used two sub html.Div, so I thought it was right.

Thank you very much,
Regards,
Alpy

        # ----- Principle Component Analysis (PCA)
        html.Div([
            html.H2("Principle Component Analysis", style={'textAlign': 'center'}),
            
            # ----- Visualization of several components
            html.Div([
                html.H4("Analysis", style={'textAlign': 'center'}),
                dcc.Graph(id='tab1_graph2'),
                html.Label("Sélectionnez le nombre de composantes principales à afficher", style={'font-weight': 'bold'}),
                dcc.Slider(
                    id='tab1_slider1',
                    min=2,
                    max=10,
                    value=3,
                    marks={i: str(i) for i in range(2,11)}
                ),
                
                # ----- 2D visualization (2 coponents)
                html.H4("2D visualization", style={'textAlign': 'center'}),
                dcc.Graph(id='tab1_graph3')
            ],style={'width': '49%', 'display': 'inline-block'}),
                
            # ----- 3D visualization (3 coponents)
            html.Div([
                html.H4("3D visualization", style={'textAlign': 'center'}),
                dcc.Graph(id='tab1_graph4')   
            ])
        ])
2

Try using separate rows in your layout and then columns within each row if you want.

Minimal example:

app.layout = dbc.Container([

	dbc.Row([			#Row 1

		dbc.Col([		#Col 1 inside Row 1

			html.Div(html.H1("Graph 1 Title")),
			html.Div(

				dcc.Graph(id="graph 1"),

				),

			]),

		dbc.Col([		#Col 2 inside Row 1

			html.Div(html.H1("Graph 2 Title")),
			html.Div(

				dcc.Graph(id="graph 2")

				)

			])

		], no_gutters=True, justify='center'),

	dbc.Row([			#Row 2

		dbc.Col(		#Col inside Row 2

			html.Div(html.H1("Graph 3 Title")),
			html.Div(

				dcc.Graph(id="graph 3")

				)

			)	 

		], no_gutters=True, justify='center'),


]style={'textAlign': 'center'}, fluid=True)
1 Like
3

Hello,

Thank you very much, it worked! I think I’m gonna use this from now on.

1 Like
4

just a heads up I missed a “,” in the code above
it should be :

],style={'textAlign': 'center'}, fluid=True)