abdoo
1
dropdown does appear properly on right side on the page
here is the photo:
here is the code:
dcc.Dropdown(
options=[
{"label": "Journal MEP", "value": "mep"},
{"label": "Journal par Moi", "value": "moi"},
{"label": "Journal par Espece", "value": "espece"},
],
id="dropdown_download",
placeholder="Choisissez le fichier à télécharger",
style={'font-size': '15px', 'width': '250px', 'display': 'inline-block', 'position':'absolute', 'right': '80px'}
),
@abdoo,
Remove the 'display':'inline-block', I think that should fix the drop down. Now, as far as placement on the screen, that might take some adjusting.
Position absolute, remove that.
You can probably put inline-block back if necessary.
abdoo
5
when I remove it, it goes outside the page:
I don’t think that I can get the same positon without those two argument in there:
'position':'absolute', 'right': '80px'
It looks like you are using dbc, I recommend that you check out some of the layouts that you can accomplish via their coding.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/
For example:
dbc.Row(
[ dcc.Dropdown(
options=[
{"label": "Journal MEP", "value": "mep"},
{"label": "Journal par Moi", "value": "moi"},
{"label": "Journal par Espece", "value": "espece"},
],
id="dropdown_download",
placeholder="Choisissez le fichier à télécharger",
style={'font-size': '15px', 'width': '250px'}
),],
justify="end",
),
And then add the other element in the row as a child. This will put them together.
1 Like
abdoo
7
thank you jinnyzor, this is the final code that I end up using, for the new comers:
dbc.Row(
[
dbc.Col([ dcc.Dropdown(
options=[
{"label": "Journal MEP", "value": "mep"},
{"label": "Journal par Moi", "value": "moi"},
{"label": "Journal par Espece", "value": "espece"},
],
id="dropdown_download",
placeholder="Choisissez le fichier à télécharger",
style={'font-size': '15px', 'width': '260px'}
) ], style={'position':'absolute', 'left': '950px'}),
dbc.Col([
html.Button(
"Télécharger", id="btn_csv",
style={'backgroundColor': '#6cd1f5', 'font-size': '15px', 'width': '140px', 'height':'35px', 'verticalAlign': 'top', 'position':'absolute', 'right':'10px'}
),
])
],
justify="end",
)
the result:
2 Likes
