Comments (5)
For the next release the .body
class has been added. Totally up to you if you want to use it, of course. I think it is handy to have that nevertheless.
Closing this one as a workaround is available
from fluentui-blazor.
Ah might be fixed by FixedPlacement #1879 ?
Fixed placement allows the region to break out of parent containers.
from fluentui-blazor.
No, FixedPlacement
won't help for this. I tried some stuff. Ended up with:
Added this
<style>
.reset {
all: revert;
}
</style>
And did this:
<FluentPopover Class="reset" Style="width: 300px; " AnchorId="trace-metadata" @bind-Open="_visible" FixedPlacement="true">
<Header><FluentLabel Typo="Typography.H3">My Header</FluentLabel></Header>
<Body>
<div class="body">
<ul>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
</ul>
</div>
</Body>
</FluentPopover>
The class body
on th Body element does not exist yet. I created it by changing the reboot.css so that .body
is added to the body declaration. I can make that chnge permanenet for the next release. For now you would need to add to your style
.body {
margin: 0;
font-family: var(--body-font);
font-size: var(--type-ramp-base-font-size);
line-height: var(--type-ramp-base-line-height);
font-weight: var(--font-weight);
color: var(--neutral-foreground-rest);
background-color: var(--neutral-fill-layer-rest);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Is adding the .body
interesting, you think?
from fluentui-blazor.
That looks hacky to me. I think the standard solution is to append the Popover to the <body>
. For example, that's what MudBlazor did with their Popover. They have a popover-provider
as a child of the body for all the popovers of the page.
from fluentui-blazor.
Yeah, that is just not how our Popover works now. I wouldn't call it a standard, but we do this for other components as well (dialog, messagebar, ...). Might make for an alternative approach in the future.
from fluentui-blazor.
Related Issues (20)
- fix: FluentEditForm fields are non editable when wrapped in FluentTab and using version 4.7.2 HOT 5
- feat: add ability to turn off SelectAll button in SelectColumn Multiple mode HOT 2
- fix: initial ActiveIndicator in FluentTabs HOT 2
- fix: Double click needed for expanding/collapsing child elements in FluentNavGroup when prerendering is turned off HOT 2
- feat: add support for BackgroundColor & Color in FluentAnchor HOT 1
- fix: bind-SelectedOption is null when using bind-SelectedOption:after FluentComboBox
- feat: add support for Virtualize for FluentCombobox HOT 7
- docs: fix/add Toast / Custom component example / Razor code HOT 2
- Add CultureInfo.InvariantCulture to ToString("0.00") HOT 1
- fix: clicking ColumnOptions in FluentDataGrid throws exception HOT 2
- docs: Make Aside (In this article) scrollable HOT 1
- docs: add documentation on how to provide more parameters to custom dialogs HOT 5
- feat: add OnKeyUp in FluentKeyCode HOT 1
- docs: add some guidance to configure RTL mode HOT 3
- feat: add multi-column to/in combobox HOT 2
- feat: add [required] to [Label] HOT 3
- Maximum call stack size exceeded when using FluentDesignSystemProvider and a FluentCard HOT 2
- feat: [DataGrid] Deselect all other items when row is clicked (not checkbox) HOT 4
- FluentCheckbox issue HOT 1
- Tree component HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentui-blazor.