havit / Havit.Blazor

Free Bootstrap 5 components for ASP.NET Blazor + optional enterprise-level stack for Blazor development (gRPC code-first, layered architecture, localization, auth, ...)
https://havit.blazor.eu
MIT License
494 stars 67 forks source link

[HxGrid] Context menu causes scrollbar #118

Closed Apskaita5 closed 4 weeks ago

Apskaita5 commented 2 years ago

When there are few rows in the grid and a relatively large context menu, when showing context menu it doesn't fit the table area which forces a scrollbar to appear (part of context menu hidden).

hakenr commented 2 years ago

@crdo, can you please take a look and asses this issue? Thanx.

crdo commented 2 years ago

@Apskaita5 @hakenr yes, I have came across this issue already. @Harvey1214 please create a reproducing page for this issue in our BlazorTestApp so I can try to come up with some solution.

Harvey1214 commented 2 years ago

@crdo the reproducing page is completed (https://dev.azure.com/havit/DEV/_git/002.HFW-HavitBlazor/commit/6ade98d68b9ffa9a1447636901ebc2d0f26fdf00).

crdo commented 2 years ago

@Apskaita5 could you please confirm that the HxGrid instance that you refer to is responsive (IsResponsive=true)?

crdo commented 2 years ago

Anyway, what causes your issue most likely is the presence of overflow: auto | hidden; on some of the parent elements. In this case you have two options:

  1. Get rid of the overflow
  2. Tweak the Popper config so the Dropdown (that is used internally for the HxContextMenu) behaves as close as desired https://popper.js.org/docs/v2/modifiers/prevent-overflow/

@hakenr can we set our own Popper config to the relevant HxCompoments?

Apskaita5 commented 2 years ago

@Apskaita5 could you please confirm that the HxGrid instance that you refer to is responsive (IsResponsive=true)?

Yep. (CSS table-responsive)

Apskaita5 commented 2 years ago

Anyway, what causes your issue most likely is the presence of overflow: auto | hidden; on some of the parent elements.

Only if it is present on Havit components.

crdo commented 2 years ago

Related discussion in Bootstrap repo https://github.com/twbs/bootstrap/issues/33463#issuecomment-822253936

hakenr commented 2 years ago

As far as I understand, new Bootstrap release should resolve this issue with https://github.com/twbs/bootstrap/pull/33684 and we don't need to do anything on our side. @crdo?

@hakenr can we set our own Popper config to the relevant HxCompoments?

Yes, we are technically able to do that, but we have to be very careful with HxContextMenu which is typically rendered repeatedly (e.g. in HxGrid) and calling JavaScript from Blazor for every single instance might cause significant performance issues.

crdo commented 2 years ago

As far as I understand, new Bootstrap release should resolve this issue with https://github.com/twbs/bootstrap/pull/33684 and we don't need to do anything on our side. @crdo?

@hakenr I think that this issue has been already merged into one of the previous versions.

hakenr commented 2 years ago

Already reported to Bootstrap: https://github.com/twbs/bootstrap/issues/35774

hakenr commented 2 years ago

Bootstrap 5.2.0 probably does not offer any suitable solution (setting boundary with data-attribute or something like that).

It is probably achievable with JavaScript options (setting boundary to body): https://github.com/twbs/bootstrap/issues/36358 ...but it is something we definitely do not won't for PERF reasons as the HxContextMenu is heavily used in data-list scenarios (such as HxGrid).

crdo commented 2 years ago

@hakenr we can give a try the 5.2s new possibility to set component configuration via data attributes...

hakenr commented 2 years ago

@crdo But the boundary is not string but we need to pass an element reference. Not sure how this might work with data attributes.

crdo commented 6 months ago

@hakenr adding data-bs-popper-config='{"strategy":"fixed"}' on the dropdown element would solve the issue. We need to decide if we want to do it with attribute splatting or some other technique.

bholbrook commented 4 months ago

Hi all, was just wondering if there was any plans to fix this soon? This is a surprisingly high-value issue and a fix would be incredibly welcome!

crdo commented 4 months ago

@bholbrook even though we have a performance concerns regarding this fix, I am submitting a PR to start a discussion on the right way to fix this. Tested by applying a overflow-hidden class on a HxGridTableContainer and adding data-bs-popper-config='{"strategy":"fixed"}' to the HxContextMenu.