Comments (7)
A fix for this will be in the next release. See #2059.
Also, if resizing ever gets messed up oy you just want a reset without reloading the page, shift+r key combo will reset to original layout and column sizes.
from fluentui-blazor.
@vnbaaij I do not believe this is a duplicate. The fix for the similar issue was just CSS, so I copied the change from c23f893 into my app.css. I also added background-color: red
to confirm that my changed CSS was matching the correct elements, which it was.
.col-width-draghandle {
height: auto;
width: calc(var(--design-unit) * 1px + 2px);
right: calc(var(--col-gap)/2 - 0.5rem);
border-top: none;
border-left: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
cursor: col-resize;
position: sticky;
background-color: red;
}
This does not solve the problem specifically affecting PropertyColumn
. I'll write a SSCCE.
from fluentui-blazor.
Aha! It isn't PropertyColumn
, it's the column being sortable. Maybe the width of the sort direction indicator is not being accounted for.
@page "/grid"
<FluentDataGrid Data="@Data" TGridItem="@Model" ResizableColumns="true">
<PropertyColumn Property="@(o => o.Foo)" Sortable="true" />
<PropertyColumn Property="@(o => o.Bar)" Sortable="false" />
<PropertyColumn Property="@(o => o.Baz)" Sortable="true" />
</FluentDataGrid>
@code {
private IQueryable<Model> Data =
Enumerable.Empty<Model>().AsQueryable();
public class Model
{
public int Foo { get; set; }
public int Bar { get; set; }
public int Baz { get; set; }
}
}
Shift-R does nothing for me.
from fluentui-blazor.
Ok, I'll remove the label. Let's dive in deeper.
from fluentui-blazor.
I fixed it locally by adding to .col-with-draghandle
min-width: calc(var(--design-unit) * 1px + 2px);
Also found a small inconsistency through this in the height of the non-sortable column; the 'bar' column header is not the same height as the other ones:
So in FluentDataGridCell.razor.css
I added: height: 100%;
With these changes, the resize bar stays in view and is useable, even if a column is resized really small.
(the Shift-R only works if a header has focus)
Would be great if you can confirm.
from fluentui-blazor.
@vnbaaij The resize bar is usable, but only barely. It narrows to 1 pixel in width, becoming almost invisible and making it difficult to interact with.
This library is nowhere near production-ready.
from fluentui-blazor.
This library is nowhere near production-ready.
The .NET team decided on using this library to build the (GA released) Aspire Dashboard with. But sure, if you say so.
from fluentui-blazor.
Related Issues (20)
- fix: blazor.web.js breaks in version 4.8.0 HOT 1
- fix: Support Safari 15 (and earlier) HOT 6
- fix: Mouse click on FluentMultiSplitter bar changes position HOT 1
- feat: Add BarHandle parameter to FluentMultiSplitter HOT 8
- Scrolling not working with keyboard in AutoComplete HOT 5
- feat: add Timeline HOT 2
- SelectedItemChanged doesn't trigger after updating Items in FluentTreeView HOT 1
- fix: FluentOverflow initially paints and then repaints if an overflow is detected, leading to a flash in FluentOverflow HOT 2
- fix: FluentOverflow does not fit to container when ChildContent is modified HOT 2
- fix: FluentSelect ValueChanged called with wrong option HOT 1
- fix: FluentDataGrid GenerateHeaderOption.Sticky not working in Chrome on iPad HOT 2
- fix: Misleading cursor in toast action HOT 1
- fix: Nullable value not working in `FluentTimePicker`
- feat: set Items as optional in ItemsProvider HOT 12
- fix: Menu outside of the screen in `FluentMenu` HOT 1
- fix: Selected option not initially set in FluentSelect only in version 4.8.0 HOT 2
- fix: FluentDatePicker does not update value when current value is null and user selects date from drop down calendar in FluentDatePicker HOT 9
- FluentNavGroup 4.8.0 exception HOT 1
- fix: MaximumSelectedOptions not limiting in FluentAutocomplete HOT 3
- fix: FluentSwitch, FluentAutocomplete and serverals other components do not align at the middle when using inside FluentDataGrid HOT 1
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.