Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

BitDataGrid breaks a wrapped header in the middle of a word although the header fits its column

Aperta
  • Qualcosa non va?
#13,963 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@msynk ci sta già lavorando.

Dal 19/10/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

Describe the bug

With WrapCellText (or a column's WrapText), a header whose text would fit in its column on one line still breaks in the middle of a word. In a Persian grid this turns «انجام‌نشده» into «انجام‌نشد» / «ه», and «عقب‌افتاده» into «عقب‌افتا» / «ده»: the second line holds a single letter or two, which reads as a different (and broken) word.

It happens on a sortable column whose HeaderTemplate puts the title beside a small icon in a horizontal flex row (a common "title + hint" header), and the column is only a few pixels too narrow for title + icon + the hidden sort arrow.

Two things combine:

  1. The sort arrow takes space while it is invisible. .bit-dtg-htext::after (content: "▲") is display: block; position: static; opacity: 0 while the column is unsorted, so it still occupies its width (8.6px here) plus the button's gap (4px) on every sortable header.
  2. overflow-wrap: anywhere on wrapped headers (.bit-dtg-hcell-wrap .bit-dtg-htext in BitDataGrid.scss) lowers the content's min-content width to a single character, so when the flex row inside the header is short of space it shrinks the text below its own longest word instead of letting it keep its width.

Measured on one header (aria-sort absent, i.e. unsorted), column width 110px, padding-inline: 10px:

header button title + icon needed title width title lines
as shipped (anywhere, arrow in flow) 89.2px 82.5px 52.6px 2 (word broken)
overflow-wrap: break-word 89.2px 82.5px 58.5px 1
anywhere, but ::after { display: none } 89.2px 82.5px 58.5px 1

So the title fits in its column with room to spare; it only breaks because 12.6px are kept for an arrow nobody sees, and anywhere lets the shortfall come out of the middle of a word.

Steps to reproduce
<BitDataGrid Items="items" WrapCellText>
    <Columns>
        <BitDataGridColumn Property="r => r.Count" Sortable Width="110px">
            <HeaderTemplate>
                <BitStack Horizontal Gap="0" VerticalAlign="BitAlignment.Center">
                    <span>انجام‌نشده</span>
                    <BitButton IconOnly Variant="BitVariant.Text" Size="BitSize.Small" IconName="@BitIconName.Info" />
                </BitStack>
            </HeaderTemplate>
        </BitDataGridColumn>
    </Columns>
</BitDataGrid>

Any text and icon work as long as title + icon is a little narrower than the header button but wider than the button minus the arrow and the gap.

Expected behavior

A header that fits its column on one line stays on one line, and when a header has to wrap it breaks between words, not inside one. Only a single word wider than the whole column should be broken.

Possible directions (whichever fits the component best):

  • Keep the sort arrow out of the flow while the column is unsorted (e.g. display: none / zero width until aria-sort is set, or position it absolutely), so it does not cost every sortable header its width.
  • Use overflow-wrap: break-word for wrapped headers: it keeps words whole and only breaks a word that alone is wider than the line. anywhere makes sense for cell values (URLs, ids), but a header title is made of words.
Workaround
.bit-dtg .bit-dtg-hcell-wrap .bit-dtg-htext {
    overflow-wrap: break-word;
}
Environment
  • Bit.BlazorUI / Bit.BlazorUI.Extras 11.0.0-pre-10 (the same rule is still on develop and bit11)
  • .NET 11 RC, Blazor Server and WebAssembly, RTL (fa-IR)
  • Edge (Chromium)
Lingua principale
C#
Stelle
1.4k
Fork
264
Merge medio
20h 36m
PR unite (30g)
322

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di bitfoundation/bitplatform

Tutte le issue di bitfoundation/bitplatform

Issue simili

Altre issue su C#

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.