размещение всего в центре приложения портит `DatePickerSingle` и` RadioItems` - PullRequest
Новая
       10

размещение всего в центре приложения портит `DatePickerSingle` и` RadioItems`

2 голосов
/ 24 сентября 2019

Я создаю Dash-приложение, которое как DatePickerSingle и RadioItems.Я разместил все по центру, чтобы оно выглядело так, как будто оно на мобильном телефоне.
Вот мой CSS, чтобы центрировать все в моем приложении: 

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

Как вы можете видеть на рисунке ниже, два дняс каждой недели не отображаются, а стрелки, которые переносят пользователя на следующий / предыдущий месяц, сдвигаются.issue with dates
Вот мой CSS для 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 выглядит после центрирования:
enter image description here --no css for RadioItems -
Но я попытался это исправить, выполнив следующее: 

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, который я предоставил выше, все находится под стилем по умолчанию.

Пожалуйста, помогите мне решить эти проблемы.

РЕДАКТИРОВАТЬ 2 (после ответа coralvanda):
Я удалил свой CSS из *html и поставил то, что вы 'мы предложили в моем коде после детей, и вот как это выглядит сейчас:
enter image description here Теперь, два Div s и Hr до того, как текст все еще не отображается (см.полоса прокрутки).

РЕДАКТИРОВАТЬ 3 (после предложения для отдельных Div с):
Вот как это выглядит сейчас:
enter image description here Код: 

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

1 Ответ

1 голос
/ 25 сентября 2019

Да, компоненты Dash могут делать забавные вещи с помощью CSS.Вероятно, лучше всего заключить их в div компоненты, а затем центрировать каждый div.Мой любимый инструмент для этого - flexbox .

Код может выглядеть примерно так: 

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

Обязательно удалите html * из вашего CSS, потому чтоэто просочится во все.Если у вас все еще есть проблемы, отправьте сообщение и обновите, и я постараюсь помочь вам.

Редактировать: Из ваших правок видно, что у вас может быть эта структура 

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