Dash中的“布局和下拉菜单”-Python [英] Layout and Dropdown menu in Dash - Python

问题描述

我似乎无法正确获取下拉菜单框的布局。基本上，我希望下拉框位于他们匹配的问题的右边，并且在同一行。

I cannot seem to be able to get the layout of my dropdown menu boxes correctly. Basically I want for the dropdown box to be on the right of their matching question and on the same line.

有人可以帮忙吗？

我尝试了style = {'display'：'inline-block'，'width：'X％'}和className ='X columns'的多种组合，但是没有运气。

I have tried multiple combinations of style={'display': 'inline-block', 'width:'X%'} and className = 'X columns' with no luck.

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_auth

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Div(
            [   
                html.Div(
                    [
                        html.H6("""Select your current industry""", 
                        style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
                    ],      
                    ),

                dcc.Dropdown(
                            id = 'business_area_dropdown',
                            options=[
                                {'label': 'Academia', 'value': 'academia'},
                                {'label': 'Energy', 'value': 'energy'},
                                {'label': 'Research', 'value': 'research'}
                            ],
                            placeholder="Select Business Area",
                            style = dict(
                            width = '40%',
                            display = 'inline-block',
                            verticalAlign = "middle"
                            )
                        )

            ],
            className='row'
        ),

    html.Div(
            [   
                html.Div(
                    [
                        html.H6("""Are you happy where you are?""", 
                        style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
                    ],      
                    ),

                dcc.Dropdown(
                            id = 'search_preference',
                            options=[
                                {'label': 'Yes', 'value': 'yes'},
                                {'label': 'No', 'value': 'no'}
                            ],
                            placeholder="Select Answer",
                            style = dict(
                            width = '40%',
                            display = 'inline-block',
                            verticalAlign = "middle"
                            )
                        )

            ],
            className='row'
        ),],

    style={'display': 'inline-block', 'backgroundColor': '#fff7dd', 'width': '99%'}

    )


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

下拉框显示在完全不同的行中。我希望下拉框与要回答的问题水平对齐。

The dropdown boxes appear in a completely different line. I'd like for the dropdown boxes to be aligned horizontally to their respective questions to be answered.

推荐答案

我最喜欢的样式技巧，

My favorite styling trick, Flexbox, is how I would solve this one.

app.layout = html.Div([
    html.Div(
        [
            html.Div(
                [
                    html.H6("""Select your current industry""",
                            style={'margin-right': '2em'})
                ],
            ),

            dcc.Dropdown(
                id='business_area_dropdown',
                options=[
                    {'label': 'Academia', 'value': 'academia'},
                    {'label': 'Energy', 'value': 'energy'},
                    {'label': 'Research', 'value': 'research'}
                ],
                placeholder="Select Business Area",
                style=dict(
                    width='40%',
                    verticalAlign="middle"
                )
            )
        ],
        style=dict(display='flex')
    ),

    html.Div(
        [
            html.Div(
                [
                    html.H6("""Are you happy where you are?""",
                            style={'margin-right': '2em'})
                ],
            ),

            dcc.Dropdown(
                id='search_preference',
                options=[
                    {'label': 'Yes', 'value': 'yes'},
                    {'label': 'No', 'value': 'no'}
                ],
                placeholder="Select Answer",
                style=dict(
                    width='40%',
                    display='inline-block',
                    verticalAlign="middle"
                )
            )

        ],
        style=dict(display='flex')
    ), ],
)

这是结果的屏幕截图：

这篇关于Dash中的“布局和下拉菜单”-Python的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！