将所有内容都放置在应用程序的中心会弄乱`DatePickerSingle`和`RadioItems` [英] placing everything in center of app messes up `DatePickerSingle` and `RadioItems`

问题描述

我正在构建一个仪表板应用程序，分别为DatePickerSingle和RadioItems.我已将所有内容放在中间，以使其看起来像在手机上一样.
这是我要在应用程序中居中放置所有内容的CSS:

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 in my app:

html * {
    width: 100%; max-width: 500px; margin: auto;
}

如下面的图像所示，每周两天都不会显示，并且将使用户转到下一个/上一个月的箭头也已移动.
这是我的DatePickerSingle的CSS:

As you can see in the below image, two days from every week are not being displayed and arrows that take the user to next/previous month are shifted.
Here's my CSS for DatePickerSingle:

.DateInput{
    margin: 0;
    padding: 0;
    background: #fff;
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

.DayPicker {
    text-align: center;
}

.DayPicker_transitionContainer {
    position: relative;
    overflow: None;
    border-radius: 3px;
}

这是居中后我的RadioItems的样子:
-RadioItems的否css-
但是，我尝试通过执行以下操作来修复它:

Here's how my RadioItems look like after centering:
--no css for RadioItems --
But, I've tried to fix it by doing this:

import dash_core_components as dash_core
dash_core.RadioItems(id="gender_input",
                     options=[
                              {'label': 'Male', 'value': 'male'},
                              {'label': 'Female', 'value': 'female'}
                             ],
                             style={"align": "left"})

这些问题只有在我将所有内容居中时才会出现.显然，我不太擅长使用CSS，除了上面提供的CSS外，所有内容均处于默认样式下.

These problems arise only when I center everything. Apparently, I'm not good in css and besides the css I provided above, everything is under default styling.

请帮助我解决这些问题.

Please help me solve these.

编辑2(coralvanda回答后):
我删除了*html的css，并将您在代码中建议的内容放在了孩子的后面，这就是现在的样子:
现在，仍不显示文本前的两个Div和一个Hr(请参见滚动条).

EDIT 2(after coralvanda's answer):
I've removed my css of *html and put what you've suggested in my code after children and this is how it looks now:
Now, twoDivs and a Hr before the text are still not being displayed(see the scroll bar).

编辑3(建议单独使用Div后):
现在是这样的:
代码是:

EDIT 3(after suggestion for seperate Divs):
This is how it looks now:
The code is:

app.layout = dash_html.Div(children=[
    # radio button with no centering
    dash_html.H4("Do you take anti-hypertensive medication"),
    dash_core.RadioItems(className='Radio-button',
                         id="hypertensive_input",
                         options=[
                             {'label': 'Yes', 'value': 'yes'},
                             {'label': 'No', 'value': 'no'}
                         ]),

    # radio button with centering
    # text appears after the radio inputs, when it should be o
    dash_html.Div(children=[
        dash_html.H4("Do you take anti-hyperlipedemic medication"),
        dash_core.RadioItems(className='Radio-button',
                             id="hyperlipedmic_input",
                             options=[
                                 {'label': 'Yes', 'value': 'yes'},
                                 {'label': 'No', 'value': 'no'}
                             ])
    ], style=dict(display='flex', justifyContent='center')),

    # an input form with no styling
    dash_html.H4("Enter your Insulin"),
    dash_core.Input(className="input-form", id="insulin_input", placeholder='e.g.: 19.3, 25, 38.2', type='number')
])

推荐答案

是的，Dash组件可以使用CSS做有趣的事情.最好将它们包含在div组件中，然后将每个div居中.我最喜欢的工具是 flexbox .

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')

请确保从CSS中删除html *，因为这将滴入所有内容.如果您仍然遇到问题，请发布并更新，我将尽力提供更多帮助.

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.

从您的编辑看来，您可能具有这种结构

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')

改为尝试以下结构:

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'),
])

我尝试使用您的最新代码，该代码已显示出来，其中显示了单选按钮后出现的文本.当我在浏览器中检查时，它们都位于同一行上. H4的顶部和底部页边距较大，而单选按钮则没有.这使得它们出现在不同的高度.您可以使用诸如style=dict(marginTop=0, marginBottom=0)之类的内容从H4中删除页边距，也可以使用诸如style=dict(marginTop=20)之类的单选按钮来设置页边距.当我执行这些操作中的任何一个时，一切看起来都正确地对准了中心.

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.

这篇关于将所有内容都放置在应用程序的中心会弄乱`DatePickerSingle`和`RadioItems`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！