Filament•3mo ago

wizard scroll bar solution?

Has anyone got a good solution to the wizard obtaining a scroll bar ? It probably be ok, if the bar moved with the wizard, but unfortunately it stays at the start.

6 Replies

ScareCrow•3mo ago

Same issue, and gets worse with 10+ steps. Also in mobile view the user needs to scroll to the bottom each time it finishes a step

LeandroFerreira•3mo ago

maybe a custom JS with gsap 🤔 https://gsap.com/community/forums/topic/25740-how-to-create-anchor-menu-to-horizontal-scrolling-page/

GreenSock

How to create anchor menu to horizontal scrolling page?

Hi, how can i create anchor links for a horizontal scrolling? My version is not working correctly: $(".menu-item").on("click", function (event) { event.preventDefault(); var id = $(this).attr('href'); var left = $(id).offset().left; $('body,html').animate({ scrollTop: left }, 1500); }); See the P...

MatthewOP•3mo ago

Thanks for suggestion. I'll go with the quicker reorganisation of text 😆

ScareCrow•3mo ago

Thanks, will try as well and post and update

toeknee•3mo ago

You could htmlstring the text too. Or use an Aside navigation instead of top.

stuartcusack•4w ago

Here's a complicated workaround for auto wizard header scrolling in v3.2.122 Add this to your wizard definition

->previousAction(
  function (Action $action) {
    return $action->extraAttributes([
      'x-on:click' => new HtmlString('$dispatch(\'scrollWizardHeaderPrev\')'),
    ]);
  }
)
->registerListeners([
  'wizard::nextStep' => [
    function (Wizard $component, string $statePath, int $currentStepIndex): void {
      /** @var LivewireComponent $livewire */
      $livewire = $component->getLivewire();
      $livewire->dispatch('next-wizard-step-custom', nextStep: $currentStepIndex + 1);
    },
  ],
])

->previousAction(
  function (Action $action) {
    return $action->extraAttributes([
      'x-on:click' => new HtmlString('$dispatch(\'scrollWizardHeaderPrev\')'),
    ]);
  }
)
->registerListeners([
  'wizard::nextStep' => [
    function (Wizard $component, string $statePath, int $currentStepIndex): void {
      /** @var LivewireComponent $livewire */
      $livewire = $component->getLivewire();
      $livewire->dispatch('next-wizard-step-custom', nextStep: $currentStepIndex + 1);
    },
  ],
])

And then in my livewire component:

@script
   <script>
     window.addEventListener("scrollWizardHeaderPrev", function() {
         let steps = document.querySelectorAll('li.fi-fo-wizard-header-step');
         steps.forEach(function (step, i) {
           if(step.classList.contains('fi-active')) {
             let el = steps[i - 1]
             el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
           }
        });
    });

    $wire.on('next-wizard-step-custom', (event) => {
      let elIndex = event.nextStep + 1
      let el = document.querySelector('ol.fi-fo-wizard-header li:nth-child(' + elIndex +')');
      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
    });
  </script>
@endscript

@script
   <script>
     window.addEventListener("scrollWizardHeaderPrev", function() {
         let steps = document.querySelectorAll('li.fi-fo-wizard-header-step');
         steps.forEach(function (step, i) {
           if(step.classList.contains('fi-active')) {
             let el = steps[i - 1]
             el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
           }
        });
    });

    $wire.on('next-wizard-step-custom', (event) => {
      let elIndex = event.nextStep + 1
      let el = document.querySelector('ol.fi-fo-wizard-header li:nth-child(' + elIndex +')');
      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
    });
  </script>
@endscript

I have to use different methods for previous and next because wizard:previousStep isn't dispatched by filament currently.

Gaming

Programming

wizard scroll bar solution?