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...
  ]))

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(() => {
    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>

<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

Jump to solution

Scroll to bottom when opening a modal?

Similar Threads

Similar Threads

Similar Threads