Text alignment incorrect with dropdown & `clearable=False`
AnnMarieW opened this issue · 3 comments
AnnMarieW commented
When clearable=False
is used with a dropdown, padding needs to be added to make the dropdown icon more visible when the text is right-aligned.
Community forum post here
See the last column in this example:
import dash
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict
app = dash.Dash(__name__)
df = pd.DataFrame(OrderedDict([
('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
('temperature', [13, 43, 50, 30]),
('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))
app.layout = html.Div([
dash_table.DataTable(
id='table-dropdown',
data=df.to_dict('records'),
css=[{"selector": ".Select-value", "rule": 'padding-right: 42px'}],
columns=[
{'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},
{'id': 'temperature', 'name': 'temperature'},
{'id': 'city', 'name': 'city', 'presentation': 'dropdown'},
],
editable=True,
dropdown={
'climate': {
'options': [
{'label': i, 'value': i}
for i in df['climate'].unique()
]
},
'city': {
'clearable': False,
'options': [
{'label': i, 'value': i}
for i in df['city'].unique()
]
}
},
),
])
if __name__ == '__main__':
app.run_server(debug=True)
akksi commented
@AnnMarieW This example doesn't currently reproduce the mentioned issue on dev
branch on my end. Do you still experience it?
akksi commented
@AnnMarieW I mean, dev
branch in dash
repo where this package has been moved to.