[BUG] dmc.HoverCard blocked by other components when placed in a dmc.AccordionMultiple with style={'postion': ‘fixed’} set.

[Kevinckyy]

[BUG] dmc.HoverCard blocked by other components when placed in a dmc.AccordionMultiple with style={'postion': ‘fixed’} set.

[RainyBlue-w]

I have also met this BUG ! Wish someone could figure out what happened and solve it ... 😢

[CNFeffery]

@Kevinckyy @RainyBlue-w Components with similar functionality: https://fac.feffery.tech/AntdPopover

[RainyBlue-w]

@Kevinckyy @RainyBlue-w Components with similar functionality: https://fac.feffery.tech/AntdPopover

Thank you! I have tried the fac, it's a wonderful package, but the problem can only be partially solved. When I set popupContainer = 'parent' , the same bug occured. This is the code:

from dash import html
from dash import dcc
import dash_mantine_components as dmc
import feffery_antd_components as fac
from dash_extensions.enrich import DashProxy
from dash_iconify import DashIconify

app = DashProxy()

app.layout = dmc.Grid(
  [
    dmc.Col(
      [
        html.Span(
          dmc.AccordionMultiple(
            [
              dmc.AccordionItem([
                dmc.AccordionControl('test'),
                dmc.AccordionPanel([
                  fac.AntdPopover(
                    children=[
                      dmc.ActionIcon(
                        DashIconify(icon = 'akar-icons:circle-fill', color='#fa5252', width=48),
                        variant='transparent', mt=3
                      )
                    ],
                    content =[
                        dmc.ColorPicker(format='hex', value='#fa5252'),
                        dmc.TextInput(value='#fa5252'),
                    ],
                    popupContainer = 'parent'
                  ),
                ]),
              ], value='test')
            ],
          ),
          style={'position': 'fixed', 'width': '40vh'},
        ),
      ],
      span=2
    ),
    dmc.Col(
      [
        dcc.Graph(figure={}),
        dmc.Text('This is a `dmc.Text` component'),
        dmc.RangeSlider(),
        dcc.Graph(figure={})
      ],
      span=10
    )
  ]
)

[CNFeffery]

@Kevinckyy why set popupContainer = 'parent', it is only used in some special layouts, what do you expect the layout to look like.

[RainyBlue-w]

@Kevinckyy why set popupContainer = 'parent', it only used in some special layout.

Because I want to let the hoverCard rolling with it's target

[CNFeffery]

@Kevinckyy why set popupContainer = 'parent', it only used in some special layout.

Because I want to let the hoverCard rolling with it's target

Since your AntdPopover is within a fixed element, a fixed element means it won't be rolled by scrolling in the current page.🤔

[RainyBlue-w]

@Kevinckyy why set popupContainer = 'parent', it only used in some special layout.

Because I want to let the hoverCard rolling with it's target

Since your AntdPopover is within a fixed element, a fixed element means it won't be rolled by scrolling in the current page.🤔

You could try to run the code, when I roll on the right, the hoverCard will also be rolling if I down't set popupContainer

[CNFeffery]

@RainyBlue-w
Because your AntdPopover is bound within a container that has a fixed layout, achieving a perfect balance is not possible. However, when the mouse moves out of the AntdPopover area, it will automatically close by default. Therefore, there is no need to worry about the specific scenario of moving the mouse to the right area and scrolling.

[RainyBlue-w]

@CNFeffery Thank you, I have understand it! Now I'm using fac instead of dmc to build my hoverCard, fac is really a useful components package!