-
Notifications
You must be signed in to change notification settings - Fork 348
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: overflow causes loss of background for Panels with scrollbars. #841
Comments
vnbaaij
added a commit
that referenced
this issue
Oct 23, 2023
* fix: chinese abbreviated day name in FluentCalendar (#834) * Minor documentation corrections (#837) * Fix #836 * fix NavMenuLink width * Rename solution file * FluentMenu: move overlay into anchored section code * Update version on index page * Update Menu example * Add some (😉) more tests * [Unit Tests] Add Unit Tests in .razor files (#844) * Fix gitignore * Add FluentBadgeTests.razor * Fix #845 Exception with NavMenuLink * Fix #841 (#842) * Hide collapse button on demo site menu and remove some commented code * Fix #851 * Fix #852 * Update Fluent UI System Icons to 1.1.220 (#854) * Small ToC script optimization * Use latest SDKs * Make demos better when opening in light/dark mode * Fix initial theme switch setting * Fix: Add '@' to keyframe for fade-out animation (#855) * MessageBar: fix fadein effect * [Accessibility] Fix some FluentButton and FluentNav aria attributes (#853) * Fix FluentButton aria-label based on Title * Fix NavMenu aria * Fix Button Titles * Fix unit Tests * Add examples and documentation for the Persona component. (#843) * Fix the Persona samples to use "@DataSource.SamplePicture" instead of using external resources. * [Autocomplete] Update some Accessibility issues (#866) * Update Autocomplete Accessibility items * Fix Enter key when popup is closed * Update Previous and Next titles (and Unit Tests) * [FluentGrid] Add FluentGridItem with no breakpoints (#862) * Add FluentGridItem with no breakpoints * Update FluentValidationSummary.razor * Fix #865 * docs: Update sample InputFileDefault.razor (#867) * Update InputFileDefault.razor * Update InputFileByCode.razor * Update the documentation: inverse Api and Example sections * fix: Implement DesignToken.WithDefault and use in Demo site (#869) * Add 'System' option to theme settings * Fix aria-orientation (#877) * Fix #861 and also fix rendering in case of manual grid (#874) * Fix security scanning workflow * Add @ref to some layout components and adjust css of those to use css vars for font properties * Update WhatsNew * Update docs
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
🐛 Bug Report
Within a
FluentDialog
, rendered as a Panel, having more vertical content than the screen height causes the background to disappear, when scrolling. Currently, the scrollbar operates on the whole layer, not just thecontrol
part.💻 Repro or Code Sample
IDialogContentComponent
with lots of repeated text. 100 lines of<p>Vertical Overflow</p>
should suffice for most screens.IDialogService.ShowPanelAsync()
.🤔 Expected Behavior
When you scroll, the content should be contained within the white background (by default) bounds of the panel.
😯 Current Behavior
When you scroll, the white background bounds of the panel stop at
100%
of screen height, and the content continues on a transparent background. I cannot take screenshots, due to working on closed-source projects.💁 Possible Solution
Within file: https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Dialog/FluentDialog.razor.css
Another solution would also help to style the Panel in a more consistent, and user-friendly way:
This would force the header to the top of the screen, force the footer to the bottom of the screen, and allow the content to scroll within it's own bounds, always taking up the remaining space between.
I would also recommend using
100dvh
, instead of100%
, to specifiy "full-height".🔦 Context
When creating forms with dynamic content, being able to scroll down a Panel is very important. You have also used
!important
, which made it even more difficult to override scecificity.🌍 Your Environment
The text was updated successfully, but these errors were encountered: