Filament•10mo 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•10mo ago

Any ideea? 🙆‍♀️

Tieme•10mo ago

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

DianaMujoiuOP•10mo ago

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

awcodes•10mo 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•10mo 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•10mo 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•10mo ago

unfortunately, is the same

awcodes•10mo 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•10mo 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•10mo 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•10mo ago

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

awcodes•10mo 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•10mo 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•10mo ago

No worries.

DianaMujoiuOP•9mo 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