Table cell misalignment and table getting wider when moving the mouse over it with flex layout
Nessuno ha ancora preso questa issue.
- Lingua principale
- Python
- Stelle
- 24.4k
- Fork
- 2.3k
- Merge medio
- 2g 7h
- PR unite (30g)
- 13
Descrizione
Describe your context
Here's my setup:
python --version
Python 3.7.5
conda list dash
# Name Version
dash 1.4.1
dash-core-components 1.3.1
dash-html-components 1.0.1
dash-renderer 1.1.2
dash-table 4.4.1
- OS: Windows 7
- Browsers:
- Chrome 77.0.3865.75
- IE 11.0.9600.19504
Describe the bug
Consider there following piece of code:
import os
import dash
import dash_html_components as html
import dash_table
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
app = dash.Dash(__name__)
app.layout = html.Div(
children=[
dash_table.DataTable(
id='table',
columns=[{'name': c, 'id': c} for c in df.columns],
fixed_rows=dict(headers=True, data=0),
data=df.to_dict('records')
)
],
className='eight columns',
style={'display': 'flex', 'justify-content': 'center'})
if __name__ == '__main__':
app.run_server(debug=True)
Now we have two problems:
- The browser renders the table with a misalignment between header and the rest of the table, see screenshots below
- When I start moving my mouse over the table then every time the mouse pointer crosses any of the cell boundaries then the table gets a few pixels wider (in Chrome) or smaller (in IE), see screenshots below.
Expected behavior
- There should be no misalignment between header and the rest of the table
- The mouse moving over the table should have no effect whatsoever.
Screenshots
Initial state in Chrome:

After having moved the mouse over the table for a bit:

Initial state in IE:

After having moved the mouse over the table for a bit:

Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Riprodurre il problema con l’esempio Python Dash DataTable fornito, utilizzando il layout flex e righe di intestazione fisse. Verificare l’allineamento dell’intestazione e del corpo, nonché la larghezza della tabella, mentre si sposta il puntatore attraverso i bordi delle celle in Chrome e IE. Il lavoro è completato quando l’intestazione rimane allineata e il movimento del mouse non modifica più la larghezza della tabella.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- python
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100