F
Filament•5mo ago
Matthew

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.
No description
6 Replies
ScareCrow
ScareCrow•4mo 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
LeandroFerreira•4mo 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...
Matthew
MatthewOP•4mo ago
Thanks for suggestion. I'll go with the quicker reorganisation of text 😆
ScareCrow
ScareCrow•4mo ago
Thanks, will try as well and post and update
toeknee
toeknee•4mo ago
You could htmlstring the text too. Or use an Aside navigation instead of top.
stuartcusack
stuartcusack•3mo 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.

Did you find this page helpful?