Repository navigation
Conversation
The calendar grid is a <table>, but its tbody and tr elements were styled with display: flex. Browsers paper over this by wrapping the flex boxes in anonymous table cells, but Blitz (Dioxus Native) has no anonymous table box generation and drops any table descendant whose display is not a table type, so the weekday header and every day cell disappeared natively. Keep the table parts at their native display types and reproduce the old layout with table features instead: table-layout: fixed for equal columns, border-spacing for the row gap, and an auto-margin block button for centering. Margins on td (which never applied inside a table) are dropped.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the calendar grid rendering as an empty box under Dioxus Native (
dx serve -p preview --features native --macos): no weekday header and no day cells.Root cause: the grid is a
<table>, but.dx-calendar-grid-body(tbody),.dx-calendar-grid-headerand.dx-calendar-grid-week(tr) were styleddisplay: flex. Browsers tolerate this via CSS 2.1 anonymous table box generation (the flex boxes get wrapped in an anonymous cell), but Blitz has no anonymous table box generation:collect_table_cellsinblitz-dom/src/layout/table.rsonly collects descendants whosedisplayis a table type and silently ignoresFlow | Flex | Gridchildren, so every row and cell was dropped.Fix: keep
tbody/tr/tdat their native table display types and express the old flex layout with table features instead:table-layout: fixedon the table → equal-width columns (wasflex: 1)border-collapse: separate; border-spacing: 0 0.25rem→ vertical gap between weeks (was flexgap).dx-calendar-grid-cellbecomesdisplay: block; margin: 0 auto→ centered 2rem button inside the celltdpadding reset to 0;margin-top/bottomontd(which never applies inside a table) removedOnly
preview/src/components/calendar/style.csschanges; no Rust or markup changes.Test plan
--features native --macos): weekday header and all days render for the default, range and multi-month variants; hover and day selection work; row spacing and out-of-month dimming match the web looknpx stylelintpasses on the stylesheetcalendar.spec.ts— could not run locally (this machine's clang has no wasm32 target, so the wasm build ofarborium-sysrootfails); relying on CI