Filament•15mo ago

Wizard height

Hello, everyone. How can I set the wizard height using hook classes. In the video I present you the wizard behavior. I want it to fit in page

15 Replies

DianaMujoiuOP•15mo ago

Any ideea? 🙆‍♀️

Tieme•15mo ago

try ->extraatributes or custom css as you already have done with the background.

DianaMujoiuOP•15mo ago

In the wizard I have a repeater which seems to cause the problem. Should I put some extra attributes on it?

awcodes•15mo ago

I think this is a bug in core. The steps are using the ‘invisible’ class which makes elements hidden but they still take up space in the dom.

DianaMujoiuOP•15mo ago

Yes, this is what's happening. Have you any idea how can I do a workaround? This is my page where I have the wizard

<div class="register-page min-h-screen flex items-center justify-center p-4">
    <form wire:submit="submit">
        {{ $this->form }}
    </form>
</div>

<div class="register-page min-h-screen flex items-center justify-center p-4">
    <form wire:submit="submit">
        {{ $this->form }}
    </form>
</div>

and this is the register-page class

.register-page {
    background: url("/public/images/auth-bg.png") no-repeat center;
    background-size: cover;
}

.register-page {
    background: url("/public/images/auth-bg.png") no-repeat center;
    background-size: cover;
}

awcodes•15mo ago

I think it would need to be fixed at the core level but possibly with custom css in a theme.

.fi-fo-wizard-step:not(.fi-active) {
    overflow: hidden
}

.fi-fo-wizard-step:not(.fi-active) {
    overflow: hidden
}

DianaMujoiuOP•15mo ago

unfortunately, is the same

awcodes•15mo ago

Try adding ‘visibility: visible’ to counteract the invisible class. And you might need to use !important too. Make sure you rerun the build for your theme too.

DianaMujoiuOP•15mo ago

.fi-fo-wizard-step:not(.fi-active) {
    overflow: hidden !important;
    visibility: visible;
}

.fi-fo-wizard-step:not(.fi-active) {
    overflow: hidden !important;
    visibility: visible;
}

Like this?

awcodes•15mo ago

Yes, but the visibility probably needs important too. But this is a pretty specific selector so I wouldn’t think it would be needed.

DianaMujoiuOP•15mo ago

I've also added the !important to visibility rerun the build for theme but is the same problem

awcodes•15mo ago

Check in devtools to make sure the style is getting applied to the actual step. And if something else is overriding your override.

DianaMujoiuOP•15mo ago

Yes, it seems that the class is not applied. I will check the devtools for more details and see if I can figure out what the problem is Thank you for your time

awcodes•15mo ago

No worries.

DianaMujoiuOP•15mo ago

Hi, @awcodes . I found this solution for the wizard

.fi-fo-wizard-step:not(.fi-active) {
    position: relative;
}

.fi-fo-wizard-step:not(.fi-active) {
    position: relative;
}

Maybe it can help you to solve the core issue

Gaming

Programming

Wizard height

Did you find this page helpful?