Как я могу автоматически выровнять поля ввода в моем приложении? - PullRequest
Новая
       17

Как я могу автоматически выровнять поля ввода в моем приложении?

0 голосов
/ 14 октября 2019

Текущий вывод / макет

Я новичок в использовании python для представления результатов моего машинного обучения. Я пытаюсь запустить механизм прогнозирования, который получает входные данные пользователя и обеспечивает их прогнозирование, запуская модель на бэкэнде.

Поэтому для этого мне нужно создать пользовательский интерфейс с использованием plotly-dash. Я создал пользовательский интерфейс, и он работает нормально, но все поля ввода выровнены в одном столбце, где я хочу выровнять их в нескольких столбцах.

Я попытался изменить выравнивание в «стиле», но это очень ручная задача 

app = dash.Dash(__name__)

app.layout = html.Div(
    [

        html.H1('AI for MI',style={'textAlign': 'center', 'color': 'Red'}),
        html.H1('Prediction Engine',style={'textAlign': 'center', 'color': 'Red'}),
        html.Div([html.P('Days To Maturity', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="DaysToMaturity", type="number", value= '806.0',),]),
        html.Div([html.P('Days From Offer', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="DaysFromOffer", type="number", value= '2879.0',),]),
        html.Div([html.P('Price', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Price", type="number", value= '105.033',),]),
        html.Div([html.P('Yield To Worst', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Yild2Worst", type="number", value= '3.414',),]),
        html.Div([html.P('Coupon Rate', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="CouponRate", type="number", value= '5.8',),]),
        html.Div([html.P('Offering Amount', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="OfferinAmnt", type="number", value= '450.0',),]),
        html.Div([html.P('Amount Outstanding', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="AmntOut", type="number", value= '450.0',),]),
        html.Div([html.P('Offering Price', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="OffPrice", type="number", value= '99.8',),]),
        html.Div([html.P('Offering Yield', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="OffYild", type="number", value= '5.832',),]),
        html.Div([html.P('Principal Amount', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="PrincAmnt", type="number", value= '1000.0',),]),
        html.Div([html.P('Duration', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Duration", type="number", value= '2.078',),]),
        html.Div([html.P('Convexity', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Convexity", type="number", value= '0.03',),]),
        html.Div([html.Button('Submit',style={"height": "auto","margin-bottom": "auto"}, id='button'),]),
        #html.Button('Submit', id='button'),
        html.Div(id="prediction-out", style={'color': 'black', 'font-style': 'italic', 'font-weight': 'bold'}),
    ]
)

Можете ли вы предложить, как я могу автоматически выровнять поля ввода или способ их выравнивания по несколькимстолбцы?

1 Ответ

0 голосов
/ 14 октября 2019

Вы можете сделать это: 

app.layout = html.Div(
    [
        html.H1('AI for MI', style={'textAlign': 'center', 'color': 'Red'}),
        html.H1('Prediction Engine', style={'textAlign': 'center', 'color': 'Red'}),
        html.Div([
            html.Div([html.P('Days To Maturity', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="DaysToMaturity", type="number", value='806.0', ), ]),
            html.Div([html.P('Days From Offer', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="DaysFromOffer", type="number", value='2879.0', ), ]),
            html.Div([html.P('Price', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Price", type="number", value='105.033', ), ]),
            html.Div([html.P('Yield To Worst', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Yild2Worst", type="number", value='3.414', ), ]),
            html.Div([html.P('Coupon Rate', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="CouponRate", type="number", value='5.8', ), ]),
            html.Div([html.P('Offering Amount', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="OfferinAmnt", type="number", value='450.0', ), ]),
            html.Div([html.P('Amount Outstanding', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="AmntOut", type="number", value='450.0', ), ]),
            html.Div([html.P('Offering Price', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="OffPrice", type="number", value='99.8', ), ]),
            html.Div([html.P('Offering Yield', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="OffYild", type="number", value='5.832', ), ]),
            html.Div([html.P('Principal Amount', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="PrincAmnt", type="number", value='1000.0', ), ]),
            html.Div([html.P('Duration', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Duration", type="number", value='2.078', ), ]),
            html.Div([html.P('Convexity', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Convexity", type="number", value='0.03', ), ]),
        ], style=dict(display='flex', flexWrap='wrap', width=400)),
        html.Div([html.Button('Submit', style={"height": "auto", "margin-bottom": "auto"},
                              id='button'), ]),
        # html.Button('Submit', id='button'),
        html.Div(id="prediction-out",
                 style={'color': 'black', 'font-style': 'italic', 'font-weight': 'bold'}),
    ]
)

И это даст вам нечто, похожее на это:

enter image description here

Послеэто, просто отрегулируйте ширину, которую вы хотите для содержащего div, и коробки будут автоматически реорганизованы в нем.

...