fixed rows - overflow with default settings #205

Activity

1. chriddyp

   added

   dash-type-bugSomething isn't working as intendedSomething isn't working as intended

   Attribute: Usability

   on Nov 7, 2018
2. slazicoicr commented on Jan 23, 2019

   

   slazicoicr

   on Jan 23, 2019

   More actions

   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,
       },
   
3. Marc-Andre-Rivet

   removed

   Attribute: Usability

   on Jul 6, 2019
4. om12nayak commented on Apr 30, 2020

   

   om12nayak

   on Apr 30, 2020

   More actions

   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}
5. ltskinner commented on May 27, 2020

   

   ltskinner

   on May 27, 2020

   More actions

   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?

   👍React with 👍2Reacted by Jakob Schelbert and Zach Morris
6. zach-morris commented on Jul 24, 2020

   

   zach-morris

   on Jul 24, 2020

   More actions

   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?
   
7. chriddyp commented on Jul 24, 2020

   

   chriddyp

   on Jul 24, 2020

   MemberAuthor

   More actions

   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.

   👍React with 👍1Reacted by Zach Morris