x-dynamic component with modal inside shifts layout on open

I have a structure like this:

<x-dynamic-component>
  <div>
    ...other stuff.
  </div>
  <livewire:components.month-end.edit-month-end-task /> <--the modal (x-filament::modal)
</x-dynamic-component>

<x-dynamic-component>
  <div>
    ...other stuff.
  </div>
  <livewire:components.month-end.edit-month-end-task /> <--the modal (x-filament::modal)
</x-dynamic-component>

The dynamic component is rendered in a loop. so the modal is rendered multiple times, which isn't ideal, but the real issue is that there is some spacing above the modal component when the page loads, but when you click to open the modal, the spacing is removed and the content shifts up the page. What I've tried I've tried wrapping the modal in a div and using wire:ignore / wire:ignore.self on the wrapping div. The only one that has any effect is using wire:ignore, but then the entire backdrop for the modal turns pitch black, so I think it's breaking that. How can I prevent the content from shifting? Or what may solve the issue is somehow rendering the livewire component outside of the x-dynamic-component, but I'm not entirely sure how to do that, but maybe i'm overlooking something obvious.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

x-dynamic component with modal inside shifts layout on open