Scroll to bottom when opening a modal?

Hi all, I have table action to open slide over...

Tables\Actions\Action::make('viewDetails')
  ->slideOver()
  ->modalContent(fn($record) => view('filament.actions.view-ticket-description', [
      ...some data...
  ]))

Tables\Actions\Action::make('viewDetails')
  ->slideOver()
  ->modalContent(fn($record) => view('filament.actions.view-ticket-description', [
      ...some data...
  ]))

When opening the modal/slide, how can I get it to scroll to the bottom please? Cheers, Tee

Solution:

@toeknee spot on, I fudged this together and it does what I need ✊ ignore the debugging 👏 this is in the blade the modal calls... ``` <div x-data x-init="$nextTick(() => {...

Jump to solution

6 Replies

toeknee•4w ago

In your view set an x-data proeprty to scroll to bottom on load

TheRealTeeHillOP•4w ago

cheers @toeknee I will have a look at that and report back 🙂

Solution

TheRealTeeHill•4w ago

@toeknee spot on, I fudged this together and it does what I need ✊ ignore the debugging 👏 this is in the blade the modal calls...

<div x-data x-init="$nextTick(() => {
    let attempts = 0;

    function scrollToBottom() {
        let modalContent = document.querySelector('.fi-modal-slide-over-window');

        if (modalContent) {
            console.log('Modal found:', modalContent);
            console.log('Scroll Height:', modalContent.scrollHeight);

            modalContent.scrollTo({ top: modalContent.scrollHeight, behavior: 'smooth' });

            setTimeout(() => {
                console.log('Updated ScrollTop:', modalContent.scrollTop);
            }, 50);
        } else if (attempts < 10) {
            attempts++;
            console.warn(`Attempt ${attempts}: Modal not found. Retrying...`);
            setTimeout(scrollToBottom, 100);
        } else {
            console.error('Modal not found after multiple attempts');
        }
    }

    setTimeout(scrollToBottom, 300);
});">
</div>

<div x-data x-init="$nextTick(() => {
    let attempts = 0;

    function scrollToBottom() {
        let modalContent = document.querySelector('.fi-modal-slide-over-window');

        if (modalContent) {
            console.log('Modal found:', modalContent);
            console.log('Scroll Height:', modalContent.scrollHeight);

            modalContent.scrollTo({ top: modalContent.scrollHeight, behavior: 'smooth' });

            setTimeout(() => {
                console.log('Updated ScrollTop:', modalContent.scrollTop);
            }, 50);
        } else if (attempts < 10) {
            attempts++;
            console.warn(`Attempt ${attempts}: Modal not found. Retrying...`);
            setTimeout(scrollToBottom, 100);
        } else {
            console.error('Modal not found after multiple attempts');
        }
    }

    setTimeout(scrollToBottom, 300);
});">
</div>

Cheers, Tee

toeknee•4w ago

Good job, Well done on posting your solution 🙂

TheRealTeeHillOP•4w ago

I always post solution... grinds my gears to see help posts with OP saying something like "I figured it out" but then not leaving solution! 🥹

toeknee•4w ago

Same hehe

Gaming

Programming

Scroll to bottom when opening a modal?

Did you find this page helpful?