DateRangepicker is not next to each other but elements (start,end, arrow) are below each other

Dash Python
1

I started a Project and more or less copied and paste the example of the datepickerrange from the doc. But the elements are not appearing next to each other but rather below and above. I checked and I have the latest Version of dash and i have tried it in multiple browsers.

>         dbc.Row(
>             [
>                 dbc.Col(
>                     dcc.Dropdown(id='styleSelector', 
>                                 options= get_options(df['style'].unique()),                                
>                                 value=[],
>                                 multi=False,
>                                 style={"margin-bottom": "5px", "color": "#007bff"}
>                                 ),
>                     width={"size": 4}
>                 ),
>                 dbc.Col(
>                     dcc.DatePickerRange(
>                             id='my-date',
>                             min_date_allowed=dt.date(2018, 1, 1),
>                             max_date_allowed=dt.date.today(),
>                             initial_visible_month=dt.date(2021, 1, 1),
>                             end_date=dt.date.today(),
>                             start_date=dt.date(2021, 1, 1),
>                             minimum_nights=1,
>                             calendar_orientation="vertical",
>                             first_day_of_week=1,
>                             clearable=False,
>                             display_format='Do MMM, YYYY',
>                             style={"margin-left": "5px", "color": "#007bff", 'display': 'inline', 'width': "100%"}     
>                         ),
>                     width={"size": 8}
>                 )

Capture
Capture1669×1029 58.3 KB

I really cannot figure out what is wrong. Can somebody please help me.

2

Can you share the entire code without the “>” on each line.

5

from datetime import date
import dash
import dash_html_components as html
import dash_core_components as dcc
import re

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.DatePickerRange(
id=‘my-date-picker-range’,
min_date_allowed=date(1995, 8, 5),
max_date_allowed=date(2017, 9, 19),
initial_visible_month=date(2017, 8, 5),
end_date=date(2017, 8, 25)
),
html.Div(id=‘output-container-date-picker-range’)
])

@app.callback(
dash.dependencies.Output(‘output-container-date-picker-range’, ‘children’),
[dash.dependencies.Input(‘my-date-picker-range’, ‘start_date’),
dash.dependencies.Input(‘my-date-picker-range’, ‘end_date’)])
def update_output(start_date, end_date):
string_prefix = ‘You have selected: ’
if start_date is not None:
start_date_object = date.fromisoformat(start_date)
start_date_string = start_date_object.strftime(’%B %d, %Y’)
string_prefix = string_prefix + ‘Start Date: ’ + start_date_string + ’ | ’
if end_date is not None:
end_date_object = date.fromisoformat(end_date)
end_date_string = end_date_object.strftime(’%B %d, %Y’)
string_prefix = string_prefix + 'End Date: ’ + end_date_string
if len(string_prefix) == len('You have selected: '):
return ‘Select a date to see it displayed here’
else:
return string_prefix

if name == ‘main’:
app.run_server(debug=True)

6

I copied now straight the example from the doc and it still doesnt work.

7

@Mad1 Does the component take up a new line when you run the doc example as well?

8

@atharvakatre Sadly, it does. The example I gave was more or less just a copied version of the doc example. And I cant explain me why this is

9

That’s strange :thinking: it never happened with me before, in a normal scenario the component should be align on a single row unless the width is not sufficient or other components are taking up the width which forces it to move onto a second row.
Are you sure the components are not taking more space than 12 cols on a single row or if you are not using any external stylesheet?

10

That what I thought as well, but I removed everything from the script and just pasted the example. The external css sheet I use was used in the doc example as well and there are no other components in the site that would disrupt the alignment.