plotly / dash-table

OBSOLETE: now part of https://github.com/plotly/dash
https://dash.plotly.com
MIT License
420 stars 74 forks source link

Text alignment incorrect with dropdown & `clearable=False` #896

Closed AnnMarieW closed 2 years ago

AnnMarieW commented 3 years ago

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:

image

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 2 years ago

@AnnMarieW This example doesn't currently reproduce the mentioned issue on dev branch on my end. Do you still experience it?

akksi commented 2 years ago

@AnnMarieW I mean, dev branch in dash repo where this package has been moved to.

AnnMarieW commented 2 years ago

@akksi I also just ran this in the latest dev version in the dash repo, and I can confirm that it works now. It looks nice - Thanks!