[HxGrid] Context menu causes scrollbar

[Apskaita5]

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]

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

[crdo]

@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]

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

[crdo]

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

[crdo]

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]

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

Yep. (CSS table-responsive)

[Apskaita5]

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]

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

[hakenr]

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]

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]

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

[hakenr]

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]

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

[hakenr]

@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]

@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]

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]

@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.