Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

fixed rows - overflow with default settings #205

Open
chriddyp opened this issue Nov 2, 2018 · 5 comments
Open

fixed rows - overflow with default settings #205

chriddyp opened this issue Nov 2, 2018 · 5 comments
Labels
dash-type-bug Something isn't working as intended

Comments

@chriddyp
Copy link
Member

chriddyp commented Nov 2, 2018

see the continent column:
image

@chriddyp chriddyp added dash-type-bug Something isn't working as intended Attribute: Usability labels Nov 7, 2018
@slazicoicr
Copy link

I am not sure why this bug occurs, but I found that setting Overflowing Into Ellipses from the Dash Docs (https://dash.plot.ly/datatable/sizing) options with a minWidth solves the problem:

dash_table.DataTable(
    css=[{
        'selector': '.dash-cell div.dash-cell-value',
        'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
    }],
    style_cell={
        'whiteSpace': 'no-wrap',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
        'minWidth': 50,
    },

@om12nayak
Copy link

Issue fixed with this code:-
style_header=
{
'fontWeight': 'bold',
'border': 'thin lightgrey solid',
'backgroundColor': 'rgb(100, 100, 100)',
'color': 'white'
},
style_cell={
'fontFamily': 'Open Sans',
'textAlign': 'left',
'width': '150px',
'minWidth': '180px',
'maxWidth': '180px',
'whiteSpace': 'no-wrap',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'backgroundColor': 'Rgb(230,230,250)'
},
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
},
{
'if': {'column_id': 'country'},
'backgroundColor': 'rgb(255, 255, 255)',
'color': 'black',
'fontWeight': 'bold',
'textAlign': 'center'
}
],
fixed_rows={'headers': True, 'data': 0}

@ltskinner
Copy link

I was unable to fix the issue in my end using this code

I am using the following attributes:
style_table
style_data_conditional
style_cell_conditional
style_header
style_cell

I suspect that the interaction between these is negating whatever the above solution addresses. Are there plans for a more robust solution to be integrated and distributed?

@zach-morris
Copy link

I'm having this same issue using dash 1.13.4. Using the following in my table:

css=[{'selector': '.row', 'rule': 'margin: 0'}],
							style_data={
							'whiteSpace': 'normal',
							'height': 'auto',
							},
							style_as_list_view=False,
							style_cell={
							'font-family': 'sans-serif',
							'height': 'auto',
							'width': 'auto',
							'minWidth': '50px',
							'whiteSpace': 'no-wrap',
							'textAlign': 'center',
							'font_size': '12px',
							'padding': '1px',
							},
							style_header={'fontWeight': 'bold',
							'font_size': '13px',
							'color': 'white',
							'padding': '0px',
							'backgroundColor': 'rgb(0, 18, 51)',
							},
							style_table={
							'maxHeight': '40vh',
							'overflowY': 'scroll',
							'width': '100%',
							'minWidth': '100%',
							'padding': '2px',
							'margin-left':'5px',
							},
							style_cell_conditional=get_dashboard_cell_conditional_filters(),
							style_data_conditional=get_dashboard_data_conditional_filters(),
							editable=False,
							fixed_rows={'headers': True,'data': 0},

Where the conditionals do various highlighting and coloring. The fixed header row is (sometimes) not aligned (see attached), and if I hover over the table it quickly toggles between being aligned and being not aligned. Is there a way around this?
Capture

@chriddyp
Copy link
Member Author

and if I hover over the table it quickly toggles between being aligned and being not aligned. Is there a way around this?

This particular behavior (hovering/unhovering) was fixed in #806 and will be released on Monday.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
dash-type-bug Something isn't working as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants