Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Margin on either side of the attached

Hi Everyone,

Pls how I do I add margins to either side of the image below.

Thank you.

One simple way is to use bootstrap and let the first and last columns of the row empty:

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

Hi, Thank you.

Empty, yes but I still have to specify the width right?

No, in the layout of a bootstrap each column has 1/12 of the screen width, then if you left the first and last column empty it will have 1/12 of the screen free in either side of the screen.

But I think the default values in bootstrap let that columns free, then it will show as you want just setting nothing.

1 Like

So I did that and no margin was created.

Could you share your code?

Hey, pls see below the portion of the code

output1=html.Div([

        dbc.Row([
            
            dbc.Col([
                
                
            ]),
        
            dbc.Col([
            
                html.H6(children='Oil Production Rate',
                    
                        style={
                        
                            'textAlign': 'left',
                        
                            'color':'#FFFFFF',
                        
                            'font-size':20
                    
                        }
                   
                       ),
            
                html.Br(),
            
                dcc.Graph(figure=px.line(df, x =df.index, y='oil bopd', color_discrete_sequence=['green']
                                     
                                    ).update_layout(
                
                    template='plotly_dark',
    
                    plot_bgcolor='#32383E',
    
                    paper_bgcolor='#32383E',
              
                    title='Oil Production Rate:'+ ' '+str(df['oil bopd'].iloc[-1]) + ' ' + 'bopd',
              
                    title_font_color='white',
    
                    title_font_size=36,
              
                    title_font_family='Droid Sans'))
        
            ],md=6),
        
            dbc.Col([
            
                html.H6(children='Gas Production Rate',
                    
                        style={
                        
                            'textAlign': 'left',
                        
                            'color':'#FFFFFF',
                        
                            'font-size':20
                    
                        }
                   
                       ),
            
                html.Br(),
            
                dcc.Graph(figure=px.line(df,x=df.index,y='gas mmscfd', color_discrete_sequence=['red']
                                     
                                    ).update_layout(
                
                    template='plotly_dark',
    
                    plot_bgcolor='#32383E',
    
                    paper_bgcolor='#32383E',
              
                    title='Gas Production Rate:'+ ' '+ str(df['gas mmscfd'].iloc[-1]) + ' ' + 'mmscfd',
              
                    title_font_color='white',
    
                    title_font_size=36,
              
                    title_font_family='Droid Sans'))
        
            ],md=6),
            
            dbc.Col([
                
                
            ]),
    
        ],align='center',justify="evenly"),
    
        html.Br(),
    
        html.Br(),
    
        dbc.Row([
        
            dbc.Col([
            
                html.H6(children='Water Production Rate',
                    
                        style={
                        
                            'textAlign': 'left',
                        
                            'color':'#FFFFFF',
                        
                            'font-size':20
                        }
                   
                       ),
            
                html.Br(),
            
                dcc.Graph(figure=px.line(df,x=df.index,y='water bwpd', color_discrete_sequence=['blue']
                     
                         ).update_layout(
                
                    template='plotly_dark',
    
                    plot_bgcolor='#32383E',
    
                    paper_bgcolor='#32383E',
              
                    title='Water Production Rate:'+ ' '+str(df['water bwpd'].iloc[-1]) + ' ' + 'bwpd',
              
                    title_font_color='white',
    
                    title_font_size=36,
              
                    title_font_family='Droid Sans'))
        
            ],md=6),
        
            dbc.Col([
            
                html.H6(children='Cumulative Production',
                    
                        style={
                        
                            'textAlign': 'left',
                        
                            'color':'#FFFFFF',
                        
                            'font-size':20
                    
                        }
                   
                       ),
            
                html.Br(),
            
                dcc.Graph(figure=px.line(df,x=df.index,y='cumulative production bbls', color_discrete_sequence=['green']
                     
                         ).update_layout(
                
                    template='plotly_dark',
    
                    plot_bgcolor='#32383E',
    
                    paper_bgcolor='#32383E',
              
                    title='Cumulative Production:'+ ' '+str(df['cumulative production bbls'].iloc[-1]) + ' ' + 'bbls',
              
                    title_font_color='white',
    
                    title_font_size=36,
              
                    title_font_family='Droid Sans'))
        
            ],md=6),
    
        ],align='center')
    
    ])

Thank you

Hey @Oladayo

I take the first part of your code and make a simple example, here is the code:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__,  external_stylesheets=[dbc.themes.BOOTSTRAP], 
              meta_tags=[{'name': 'viewport', 'content':'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=1.0' }]
               )

app.layout = dbc.Container([
    dbc.Row([
#        dbc.Col([
#                
#                
#            ]),
        
        dbc.Col([
            html.H6(children='Oil Production Rate',
                    style={'textAlign': 'left', 'color':'#FFFFFF', 'font-size':20}),
            html.Br(),
            dcc.Graph( id="graph1"),
        ], md=6),
        
        dbc.Col([
            html.H6(children='Gas Production Rate',
                    style={'textAlign': 'left', 'color':'#FFFFFF', 'font-size':20}),
            html.Br(),
            dcc.Graph(id="graph2")
        ],md=6),
        
#        dbc.Col([ ]),
        
    ],align='center',justify="evenly"),
])


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

Then, this is how is showed the graphics in my screen:
image

See if you are using bootstrap as “external_stylesheets=[dbc.themes.BOOTSTRAP]” and also the dbc.Container([ as the first layout component.

1 Like

Hi @Eduardo

So I used Darkly dbc.themes.

Also, I only introduced the dbc. Layout only at the charts section.

So let me work with the dbc. Container from the app layout section and I will revert back

Thank you so much

Hey @Eduardo

I tried that and this is what I get.

more than expected margin :slight_smile:

Thank you

1 Like

Hi @Eduardo, I finally fixed this by creating a css file in an asset folder with the code below;

body {
margin-left: 30px;

margin-right: 30px;

margin-bottom: 30px;

}

I got this

Thank you so much for your help.

Nice simple solution :grinning:

My recommendation to use bootstrap was because it provides proportional spaces depending on the size of the screen, for example if you want to add more wide spaces, you could use for example style={‘margin’: 100px}, but could be not to much spaces in a large screen and very large for a mobile phone screen :thinking:

2 Likes

Sounds like you have a solution, but you could also use Bootstrap utility classes such as mx-3 to add a margin in the x (horizontal) direction to the outer html.Div.

3 Likes