Python Dash HTML Element formatting

Question

I am completely new to dash and frontend. I am a data engineer, but I was asked to build a frontend something like this:

And I was able to get like below:

As you can see, in the first image the checklist elements are in order and in the same horizontal line as the search keyword but in my case its down. Like, in study setting, "in vitro" in image 1 is at the same line but mine is below it. How can I create layout that gives me the image 1 output. Here is my layout code:

app.layout = html.Div([

    # activated once/week or when page refreshed
    html.Div(children=[html.H1(children='Data Search',style={'textAlign':'center'})]),
    html.Div(children=[html.Div(children=[html.B("Search:"),dcc.Input(placeholder="Enter a value...",type='text',id='input-on-submit',style={"margin-left": "25px"})])]),
    html.Br(),
    html.Div(children=[html.P(children="Additional Search Criteria")]),
    html.Br(),
    html.Div(children=[html.Div(
                                children=[html.B("Study Setting:",
                                          style={"margin-left": "15px"}),
                                          dcc.Checklist
                                          (id='study-setting',options=[{"label":"in vitro","value":"in vitro"},{"label":"ex vivo","value":"ex vivo"},{"label":"in vivo","value":"in vivo"}],
                                          inline=True)
                                          ])],style={"border-style": "solid","border-width": "1px"}),
    html.Div(children=[html.Div(
                                children=[html.B("Study Type:",
                                          style={"margin-left": "15px"}),
                                          dcc.Checklist
                                          (id='study-type',options=[{"label":"pharmacodynamics","value":"pharmacodynamics"},{"label":"safety pharmacology","value":"safety pharmacology"},{"label":"pharmacokinectics(PK)","value":"pharmacokinectics"}],
                                          inline=True)
                                          ])],style={"border-style": "solid","border-width": "1px"}),
    html.Div(children=[html.Div(
                                children=[html.B("Tox Study Type:",
                                          style={"margin-left": "15px"}),
                                          dcc.Checklist
                                          (id='tox-study-type',options=[{"label":"single dose","value":"single dose"},{"label":"repeat dose","value":"repeat dose"},{"label":"genotoxicity)","value":"genotoxicity"},{"label":"fertility & early embryonic development (segment |||)","value":"fertility & early embryonic development (segment |||)"},{"label":"embryo-fetal development (segment ||)","value":"embryo-fetal development (segment ||)"},{"label":"local tolerance","value":"local tolerance"},{"label":"hemocompatibility","value":"hemocompatibility"}],
                                          inline=True)
                                          ])],style={"border-style": "solid","border-width": "1px"}),])

Also, you can see that some keywords are long like "fertility & early embryonic development (segment |||)" but its automatically adjusted to come in next line so that if there are more keywords, it comes in the same border.

Any help is appreciated.

Thanks, Ashish

Daweo · Accepted Answer · 2022-07-27 12:00:09Z

1

If elements are placed side-by-side or one-above-another is affected by value of display CSS property. First can be achieved using inline and second using block, consider following simple example

<b style="display:inline">First</b>
<b style="display:inline">Second</b>
<b style="display:block">Third</b>
<b style="display:inline">Fourth</b>

Observe that when you have 2 inline elements next to each other (First and Second) they appear in single line, but as block element (Third) takes whole width next inline element is on next line.

In your case add "display":"inline" to styles of your html.Bs and dcc.Checklists

answered Jul 27, 2022 at 12:00

Daweo

38.2k3 gold badges17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ash15 Over a year ago

Thanks @Daweo. I am now able to get the keywords in a single line. Is it possible to separate the options with spaces in between? Like in image one they are evenly split.

Collectives™ on Stack Overflow

Python Dash HTML Element formatting

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related