How to arrange input box & button

Dash Python
1

Hi! I have some question about arrange html component

actually I want arrange Input box next to button, However result is like this

%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%2C%202019-04-10%2015-19-48

How can I arrange button next to input box

below is layout code

  layout = html.Div(children=[
    html.Div([], className='row'),
    html.Div([
        dcc.Input(
            id='subscribe_content',
            placeholder="Enter input",
            type='text',
        ),
        dcc.ConfirmDialogProvider(
            html.Button(
                'Subscribe',
            ),
            id='subscribe_button',
        )
    ], style={"float": 'right',
              'display': 'inline-block',
              }),
    html.Div(id='subscribe_result', children=None)
])

In advance, Thank you everybody!

2

See How to manage the layout of division/figures in dash

Also look at the mentioned css style sheet.

3

Thanks to reply

But I found something strange.

when I use dcc.Input() and html.button(). There were screened well like below

+++++++++++++++++
+Input box + button +
+++++++++++++++++

but when I use dcc.ConfirmDialogProvider() . Components would be drawn like below
++++++++++++++++++++
+Input box +
+++++++++++++++++++
+button(dialog provider)+
++++++++++++++++++++

this is my code

layout = html.Div([
dcc.Input(
id=‘subscribe_content’,
placeholder=“Enter”,
type=‘text’
),
dcc.ConfirmDialogProvider(
html.Button(
id=‘subscribe_button’,
children=‘subscribe’
)
)
])

4

That is interesting behavior, but I haven’t experienced that as the style sheet I use is based off of chriddyp’s via the link I provided. I could be the nature of the dcc.ConfirmDialogProvider to start on the next “row” by default.

Experiment with the className feature that lets you set the alignment; ie setting to row or two columns, three columns, etc.

5

I used className that “tow columns, three columns” even “six columns” but it hasn’t changed.

layout = html.Div([
        html.Div(className="tow columns",
                 children=[dcc.Input(
                     id='subscribe_content',
                     placeholder="Enter your Single ID",
                     type='text'
                 ),
                     dcc.ConfirmDialogProvider(
                         html.Button(
                             id='subscribe_button',
                             children='subscribe'
                         )
                     )
                 ])
    ],style={"float": 'right'})

In additional I debugged firefox page and html context is shown below

 <div style="float: right;">
   <div class="tow columns">
     <input type="text" id="subscribe_content" placeholder="Enter ">
       <div><button id="subscribe_button">subscribe</button><!-- react-empty: 66 --></div></div></div>

I guess that ConfirmDialogProvider generate<div> text except condtion

so Inputbox and ConfirmDialogProvider isn’t on same line

6

Not sure if your className typo is a problem (you have tow vice two)

Also, here is a good example: Two graphs, side by side

Make sure you are using the css file referenced…if you don’t, then it won’t work (unless your css file has the same className references)