Placing Everything In Center Of App Messes Up `datepickersingle` And `radioitems`

I am building a dash app, which as DatePickerSingle and RadioItems. I've placed everything in center to make it look like it's on mobile phone. Here's my css to center everything i

Solution 1:

Yes, Dash components can do funny things with CSS. It's probably best to enclose them in div components, and then center each div. My favorite tool for this is flexbox.

The code might look something like this:

html.Div(children=[
    # your component here
], style=dict(display='flex', justifyContent='center')

Make sure to remove the html * from your CSS, because that will trickle down into everything. If you still have trouble, post and update and I'll try to help more.

Edit: It looks from your edit like you may have this structure

html.Div(children=[
    # component 1# component 2# component 3# etc.
], style=dict(display='flex', justifyContent='center')

Try this structure instead:

html.Div(children=[
    html.Div(children=[
        # component 1 here
    ], style=dict(display='flex', justifyContent='center'),

    html.Div(children=[
        # component 2 here
    ], style=dict(display='flex', justifyContent='center'),

    html.Div(children=[
        # component 3 here
    ], style=dict(display='flex', justifyContent='center'),
])

Edit: I tried using your latest code, which you've displayed showing the text appearing after the radio buttons. When I inspect in the browser, they are all centered on the same line. The H4 has large top and bottom margins, and the radio buttons don't. That makes them appear at different heights. You can either remove the margins from the H4 with something like style=dict(marginTop=0, marginBottom=0), or you could set a margin on the radio buttons with something like style=dict(marginTop=20). When I do either of those, everything looks properly aligned in the center.