Dash datatables inline block not centered

[Bambos]

Hello everyone,

my target is to align center & inline block 2 datatables. (side by side and centered)

this is my code: a parent div with 2 div inside, each table in its own div.

app.layout = html.Div([

    html.Div(dashtable1, style = {'width': 'auto', 'display':'inline-block',
                'align-items':'center', 
                #'justify-content':'center',
                'horizontal-align':'middle',
                            'marginLeft': '20px', 'marginRight': '5px' ,
                             'marginTop': 'auto', 'marginBottom': '20px',
                              'color': 'white'
                              }),
    
    html.Div(dashtable2, style = {'width': 'auto', 'display': 'inline-block',
               'align-items':'center', 
               #'justify-content':'center',
               'horizontal-align':'middle',
                            'marginLeft': '5px', 'marginRight': '5px' ,
                            'marginTop': 'auto', 'marginBottom': '20px',
                             'color': 'white'
                             }),

    
    ] )

the result is on the picture. i have tried all properties i could find online, justify-content, horizontal-align, align-items , display:flex etc…

Any comments appreciated.

[adamschroeder]

hi @Bambos ,
Welcome to the community and than you for your question.

I’m not 100% clear on how you want to align things in the dataTable. Can you share a final image or drawing of how you would like the layout to look like?

I also saw that you got a reply to your question here. Did that not work?

[Bambos]

Hello @adamschroeder , yes and no, doing manipulation with margins it might work on a certain browser size, but not working ok when resizing the browser window.

my target is to have tables as “inline block” , with some space between them (margin) and all the row to be centered. like this :

thanks for any suggestions.

[Bambos]

Also i have similar issue with html.H4 in html.Div.
Target is to have in the same line 2X html.H4 objects, aligned left with some margin and align right with some margin, letting the space be in the middle.

I thought using a main Div, with the objects in a separate Div would give more flexibility (because of different style dictionary to each object) but seems again something is wrong.

code like this:
return html.Div([

    html.Div([html.H4('DSO Scada Web Interface')], 
             style={'textAlign': 'left',
                 #'width':'140%',                         
                'margin-right':'50px',
                'margin-left':'50px',
                'display':'inline-block'}
                ),

    html.Div([html.H4(a)], style={'textAlign': 'right',
                'margin-right':'50px',
                'margin-left':'50px',
                'display':'inline-block'})  ] , 
    
    style={'display':'inline-block', 'textAlign': 'center',
              'align-items':'center', 
            'justify-content':'center',
            })

Appearance target is like that: Blue positions, same line, aligned left with a margin and right with a margin.

[adamschroeder]

Hi @Bambos
Regarding the H4 alignment, I think this should work for you:

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([html.H4("DSO Scada Web Interface")], width=6),
        dbc.Col([html.H4("DSO Scada Web Interface", style={'textAlign': 'right'})], width=6),
    ], justify="around")
])

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

[Bambos]

@adamschroeder it’s been very nice week getting familiar with bootstrap component. Thank you.
it feels more controllable layout in comparison to the plain html.Div container.

do you have a suggestion on how to make smaller text in a dbc.input text box ? i check all documentation, i couldn’t find any of this kind of property.
I’m trying to fit an IP address inside a column (this block is on a parent column)

[adamschroeder]

hi @Bambos
That’s a good question. I’m not sure but if you share a minimum working example (code), I can try playing around with it and see if I can find a way.

[Bambos]

Hello Mr. Adam,

This is the absolute smaller amount of code i could do, as the example layout is 3 parent columns with row and 4 subcolumns in each parent column. Objective is to fit a normal IP address with 3 digits address in the input text box. I saw the property size=‘small’ without any impact. thank you for your effort.

import dash
import dash_bootstrap_components as dbc
from dash import html

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.title='Modbus Commander V1'

app.layout = dbc.Container([ html.Br(),

    dbc.Row([ dbc.Col(dbc.Row([ dbc.Col( dbc.Input(value='127.0.0.1', type="text", size='small' )), 
              dbc.Col(dbc.Input(value=1000, placeholder="address", type="number")),
              dbc.Col(dbc.Input(value=256, placeholder="value", type="number")) ,
              dbc.Col(dbc.Button('write')) ])),

              dbc.Col(dbc.Row([ dbc.Col( dbc.Input(value='127.000.000.001', type="text", size='small' )), 
              dbc.Col(dbc.Input(value=1001, placeholder="address", type="number")),
              dbc.Col(dbc.Input(value=257, placeholder="value", type="number")) ,
              dbc.Col(dbc.Button('write')) ])),

              dbc.Col(dbc.Row([ dbc.Col( dbc.Input(value='127.0.0.1', type="text", size='small' )), 
              dbc.Col(dbc.Input(value=1002, placeholder="address", type="number")),
              dbc.Col(dbc.Input(value=258, placeholder="value", type="number")) ,
              dbc.Col(dbc.Button('write')) ])),

         ])
])

if __name__ == '__main__':
    app.run_server(port=80, debug=True , host='0.0.0.0')

[tcbegley]

Hey @Bambos

Note first of all that size="small" has no effect, it should be size="sm", however in this case the size of the input box itself is decreased which is i think not what you want.

You can set the font size using the style argument, but note that the font size also influences the height of the input box, so you must also set the line height to compensate. By default the font size is 1rem and the line height is 1. If you multiply the font size by x, you must multiply the line height by 1 / x to compensate. E.g. if you halve the font size, double the line height.

style={"fontSize": "0.4rem", "lineHeight": 3.75}

^this combination made your long IP fit in the box for me, but in my opinion it doesn’t look great, and I think fundamentally there just isn’t enough horizontal space in your current layout. I would suggest reorganising your content, perhaps into three rows where each row has a bit more horizontal space to fit everything in

[Bambos]

@tcbegley yes, that’s the idea. Thank you very much for the input.

[Bambos]

@tcbegley Hello Mr. Tom,
happy new year, i hope all is good.

i’m working only with dbc components lately, and i realize that without the external stylesheet is not working correctly on positioning the html content.
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

can you confirm and explain this please ?

[tcbegley]

Bootstrap is styled with CSS, so that CSS needs to be linked in your app.

The CSS is not bundled automatically because there are many variants and themes for Bootstrap, so we give the user the choice to link whichever one they want.

Check out @AnnMarieW’s theme explorer to see some of the variety of styles you can achieve by linking different stylesheets: https://hellodash.pythonanywhere.com/

[Bambos]

Thanks ! i will check out those.

Something that is not clear from documentation, html.Div is it the same as dbc.Container ?
They look to be functioning the same. What is your suggestion ?

[tcbegley]

A container is a div with certain CSS classes applied that add spacing and assist with layout. If you’re seeing no difference between that and a div it might be that the stylesheet hasn’t been linked correctly